I'm looking for half-pie chart similar to this:
I'm looking for gauge chart but in this case series don't printed, only print the dial values, and don't get to print bands
I'm thinking to printed with realtime plotband. But in this case the chart api is not possible to change or I don't find it.
Use the pie chart is other possibility, but in this case I need to start from -90º to +90º, and I don't find anything how to use, and type=pie doesn't have pane (//api.highcharts.com/highcharts#pane) option.
Can anyone help me?
You can call Axis.update() and pass it an object of Axis config settings. One of those settings can be new plotBands values. So every time you update the gauge value, you reset the plotBands on either side of the gauge value. You'll need to tweak other things to get my example to look just like your image.
Check out this jsFiddle: http://jsfiddle.net/ZrGut/
yAxis.update({
plotBands: [{
from: 0,
to: leftVal,
color: 'pink',
innerRadius: '100%',
outerRadius: '0%'
},{
from: leftVal,
to: 90,
color: 'tan',
innerRadius: '100%',
outerRadius: '0%'
}]
}, false);
Finally yesterday at night I found other solution, attach de fiddle. Thanks for your help.
plotOptions: {
pie: {
startAngle: 0,
allowPointSelect: true,
innerSize: '110%',
size:'150%',
center: [100,200],
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: null,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
}
Related
I'm trying to create a chart that looks like the attached image.
I have come very close by using a bullet graph chart and I'm trying to get an arrow image dataLabel positioned on the series point but it sometimes goes to the right or left of the point. My intention is to have the series color transparent and have the datalabel visually replace the extending bar. not the target bar but the series bar itself. Buy my image not placed exactly on the point in the series OR is there another way to use an image or icon on top of the series point?
plotOptions: {
series: {
dataLabels: {
enabled:true,
useHTML:true,
x: -3,
y: 35,
format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
},
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '300%'
}
}
}
Here is a JSFiddle used to try positioning the arrow...
Depending on how strict you are with how the data for this chart (in other words, where the arrow lies along the chart and how the colored zones are measured), there's a way to mimic this image using plot bands and line markers.
See my snippet below (or the fiddle at https://jsfiddle.net/brightmatrix/r78vz49a/).
I used plot bands to create the colored zones along an axis of 0 to 100 (assuming, for example, that 0% is fresh and 100% is totally rotten/inedible).
Then, there are two series: one with a marker that forms the arrowhead and a second that is simply a vertical line; both complete the arrow. So long as you keep the x-axis values for both the arrowhead and line consistent, the arrow would "move" along the line.
I hid the y-axis labels since they weren't relevant to your chart. If you wanted, you could also hide the x-axis labels and move your plot band labels below the chart.
Below is a screenshot of the final product. I hope this information is helpful for you in solving this challenge.
Highcharts.chart('container', {
title: { text: 'Freshness scale' },
xAxis: {
plotBands: [{
color: 'rgba(0,255,0,0.5)',
from: 0,
to: 33,
label: { text: 'Fresh', align: 'center', x: -10 }
},{
color: 'rgba(255,255,0,0.5)',
from: 33,
to: 67,
label: { text: 'Stale', align: 'center', x: -10
}
},{
color: 'rgba(255,0,0,0.5)',
from: 67,
to: 100,
label: { text: 'Moldy', align: 'center', x: -10
}
}],
min: 0,
max: 100
},
yAxis: {
min: 0,
max: 1,
tickInterval: 1,
title: { text: '' },
labels: { enabled: false }
},
legend: { enabled: false },
tooltip: { enabled: false },
series: [{
name: 'Freshness arrow',
data: [{x: 55, y: 0}],
lineWidth: 0,
color: 'black',
marker: { symbol: 'triangle-down', radius: 10, y: -10 }
},{
name: 'Freshness line',
data: [{x: 55, y: 0},{x: 55, y: 0.5},],
lineWidth: 4,
color: 'black'
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 150px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
My pie chart slice is too narrow to one another i would like to create a distance gap between slice. What is the command to do that
The parameter you may use is slicedOffset, it will give you a chance to slice your point.
series: [{
type: 'pie',
name: 'Browser share',
slicedOffset: 30,
borderColor: 'white',
data: [
['Firefox', 75.0], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}
]
}]
Here you can see an example how it can work: http://jsfiddle.net/t8cqev0r/2/
You can also use edgeColor and edgeWidth for getting your pie points separated:
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
edgeWidth: 5,
edgeColor: 'white'
}
},
Here you can see an example: http://jsfiddle.net/t8cqev0r/3/
I am trying to use the highcharts solid gauge, and I would like to have a legend, however Highcharts developers seem to have removed the color option from solid gauge series, which I believe is what the legend pulls it's color from.
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
color: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}],
showInLegend:true
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}],
showInLegend:true
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}],
showInLegend:true
}]
Jsfiddle
Is there any way to get my legend to match the series colors?
I haven't been able to figure out how to color the marker in the legend, but to me the markers don't make sense in this case anyhow. So, I've turned them off in my fiddle.
To color the text, you can use the legend labelFormatter function.
legend: {
labelFormatter: function() {
return '<span style="text-weight:bold;color:' + this.userOptions.color + '">' + this.name + '</span>';
},
symbolWidth: 0
},
http://jsfiddle.net/9dq2p7dw/21/
Just to add, Barbara's answer is still valid in 2019.
However, to remove the marker, you'll have to add
squareSymbol: false
I would have added this as a comment in her answer but I do not have enough reputation points.
I seem to have found a plotting bug see this example here: http://jsfiddle.net/MrSteve/Smu6r/
Source data:
<script src="http://gosargon.com/iconectiv/portWon.js"></script>
Javascript:
$('#container').highcharts('StockChart', {
chart: { },
credits: {
enabled: true
},
yAxis: {
startOnTick: false,
endOnTick: false,
min: -20000,
max: 20000,
plotBands: [{
from: 0,
to: 60000,
color: 'white'
}, {
from: -60000,
to: 0,
color: 'rgba(68, 170, 213, 0.1)'
}]
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: 'gray',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
selected: 1
},
series: [{
name: 'Net',
data: portsNetData
}
]
});
});
Look at first few days of March and the hover shows all positive numbers by day (as does the json data) but the line takes a weird dip below zero similar to 1/27 -7661 value, but in March portion of X axis. I see the same problem in Chrome, Safari and Firefox.
The problem seems to be related to having negative data values. When I remove them the problem goes away.
Suggestions and help welcome.
Thanks,
Steve
If you check the javascript for errors you'll see this one:
http://www.highcharts.com/errors/15
Highcharts expects data to be sorted
This happens when you are trying to create a line series or a stock
chart where the data is not sorted in ascending X order. For
performance reasons, Highcharts does not sort the data, instead it is
required that the implementer pre-sorts the data.
This appears to be misleading because at first glance you data looks fine.
BUT, the with Date.UTC function, the month is zero based so some of your dates like
Date.UTC(2014,01,31) // this is February the 31st!?!
don't make any sense and Date.UTC is trying to make meaning out of them.
Concerning http://jsfiddle.net/5gjne/10/ I would like simply hide the "red" range series (range2) into tooltip, how to make this?
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
Thanks!
If you disable mouse tracking on that series it'll be excluded from tooltip.
{
name: 'Range',
data: ranges2,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
color: 'red',
zIndex: 0,
enableMouseTracking: false //<--add this
},
See updated fiddle.