i have a gauge chart with two y axis. The second axis should have a size of 50% of the first axis. I know the offset property, but there i only can set numbers as a value. Is there a way to do that?
Here is a fiddle. The inner blue circle should be the half size of the outer one.
http://jsfiddle.net/jhpbc176/
$('#container').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -70,
endAngle: 70,
background: null
},
plotOptions: {
gauge: {
dial: {
baseWidth: 2,
baseLength: '100%',
radius: '100%',
rearLength: 0
},
pivot: {
radius: 5
},
dataLabels: {
enabled: false
}
}
},
yAxis: [ {
min: -300,
max: 500,
tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
lineColor: '#933',
lineWidth: 0,
minorTickPosition: 'outside',
tickLength: 0,
minorTickLength: 0,
labels: {
distance: 12,
},
offset: 0,
plotBands: [{
from: -300,
to: 2,
thickness: 15,
color: '#55BF3B'
}, {
from: 0,
to: 202,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#55BF3B'],
[1, '#DDDF0D']
]
}
}, {
from: 200,
to: 500,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#DDDF0D'],
[1, '#ff0000']
]
}
}]
}, {
min: -200,
max: 200,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -100,
lineWidth: 2,
labels: {
enabled: false
},
tickLength: 0,
minorTickLength: 0,
endOnTick: false
}],
series: [{
data: [250]
}]
});
The simplest way which comes to my mind is divide chart container by 4, then you will achive 50% of chart height.
offset: (function(){
return -1 * ($('#container').height()/4);
})(),
Example: http://jsfiddle.net/jhpbc176/1/
Related
I have a problem to align titles on xAxis to the left and right like on the picture. I've tried by adding html tags and inline styles to achieve this, but it's not working. Here's my code:
xAxis: [{
type: 'category',
labels: {
step: 1,
},
scrollbar: {
enabled: true,
},
min: 0,
categories: [],
title: {
align: 'high',
rotation: 0,
y: -20,
x: 60,
text: subtitleOne,
style: {
"fontSize": "14px",
"fontWeight": "bold",
"textAlign": "left"
}
}
}, {
offset: 0,
tickLength: 0,
lineWidth: 0,
title: {
align: 'high',
rotation: 0,
y: -20,
x: 45,
text: subtitleTwo,
style: {
"fontSize": "14px",
"fontWeight": "bold"
}
}
}]
What am I doing wrong?
Semi Circle Pie With Triangle Gauge
How do I create the above semicircle pie chart with a triangle gauge at the top of the chart.
I have the speedometer gauge working, but it doesn't meet the needs.
Is there a way within the highchart api to use a triangle for the gauge, and not the speedometer?
Thanks
Here is the fiddle with the tweaked JSON.
https://jsfiddle.net/mschreiberjdi/nwb7vL62/
$(function() {
$('#container').highcharts({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: '40%<br>Probability Of <br>Success',
align: 'center',
verticalAlign: 'bottom',
y: -145
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
pane: {
center: ['50%', '75%'],
size: '50%',
startAngle: -90,
endAngle: 90,
background: {
borderWidth: 0,
backgroundColor: 'none',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
yAxis: [{
lineWidth: 0,
min: 0,
max: 90,
minorTickLength: 0,
tickLength: 0,
tickWidth: 0,
labels: {
enabled: false
},
title: {
text: '', //'<div class="gaugeFooter">46% Rate</div>',
useHTML: true,
y: 80
},
/*plotBands: [{
from: 0,
to: 46,
color: 'pink',
innerRadius: '100%',
outerRadius: '0%'
},{
from: 46,
to: 90,
color: 'tan',
innerRadius: '100%',
outerRadius: '0%'
}],*/
pane: 0,
}],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
},
gauge: {
dataLabels: {
enabled: false
},
pivot: {
radius: 80,
borderWidth: 2,
borderColor: 'transparent',
backgroundColor: 'white'
},
dial: {
radius: '100%',
backgroundColor: 'gray',
borderColor: 'gray',
baseWidth: 140,
topWidth: 1,
baseLength: '10%', // of radius
rearLength: '10%'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Low', 25],
['Medium', 25],
['HIgh', 25]
]
}, {
type: 'gauge',
data: [40],
dial: {
rearLength: 0
}
}],
});
});
When I create a chart, I can place a nice line on the right side of the chart like so:
yAxis: [{
height: '65%',
offset: 0,
lineWidth: 2
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}]
I have been asked to add an additional line on the left of the chart, but I don't see a built-in way to do that in the API docs. Is there a way to do this?
One way could be to add y axes on left side that will be linkedTo main y axes.
Example: http://jsfiddle.net/86zm6cav/
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}, {
opposite: false,
height: '60%',
linkedTo: 0,
lineWidth: 2,
offset: 0,
labels: {
enabled: false
}
}, {
opposite: false,
top: '65%',
height: '35%',
linkedTo: 1,
lineWidth: 2,
offset: 0,
labels: {
enabled: false
}
}],
Other option is to use renderer and create a custom path(s).
API reference for renderer: http://api.highcharts.com/highcharts#Renderer.path
I've this HighCharts:
$('#container').highcharts({
chart: {
type: 'scatter'
},
title: {
text: 'Title'
},
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.value;
}
}
}
},
series: [
{
name: 'Points',
data: [
{ x: 10, y: 25, value: 96.1 },
{ x: 50, y: 25, value: 96.3 },
{ x: 10, y: 50, value: 96.0 },
{ x: 50, y: 50, value: 96.3 },
{ x: 90, y: 50, value: 96.4 },
{ x: 100, y: 50, value: 96.5 },
{ x: 10, y: 100, value: 96.1 },
{ x: 50, y: 100, value: 96.3 },
{ x: 100, y: 100, value: 96.6 }
]
}
]
});
I would like to mark the 90/100 point with a dashed line. How can I do that?
See my JSFiddle.
I would use scatter series with enabled line: http://jsfiddle.net/6x6s09d8/4/
{
data: [
[90, 20],
[90, 100],
[10, 100]
],
lineWidth: 2,
dashStyle: 'Dash',
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
}
Only limitation now is to set minPadding: 0 for both Axes.
I changed the color over the line of the navigator: color: 'rgba(255, 255, 255, 0.00)'
and I changed the color of the line: lineColor: 'red'
it is my chart
but I can not change the color under the line of the navigator: ScreenShot
all code of the navigator:
navigator: {
maskFill: 'rgba(255, 255, 255, 0.45)',
series: {
type: 'areaspline',
color: 'rgba(255, 255, 255, 0.00)',
fillOpacity: 0.4,
dataGrouping: {
smoothed: false
},
lineWidth: 2,
lineColor: 'red',
marker: {
enabled: false
},
shadow: true
},
yAxis: {
reversed: true
}
}
You may want to try this:
navigator: {
maskFill: 'rgba(255, 255, 255, 0.45)',
series: {
type: 'areaspline',
color: 'rgba(255, 255, 255, 0.00)',
fillOpacity: 0.4,
dataGrouping: {
smoothed: false
},
lineWidth: 2,
lineColor: 'red',
fillColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [[0, '#FF8000'], [1, '#FFFF00']]
},
marker: {
enabled: false
},
shadow: true
},
yAxis: {
reversed: true
}
}