I need to display a white line in the middle of the gauge chart like this:
But I can't find a customization option suitable to do that in Highcharts gauge chart. Can anyone please help?
I don't want the "gauge" arrow. I just want the white separator at 50%.
You can add the separator by using plotLines option:
yAxis: {
plotLines: [{
value: 100,
width: 4,
color: '#fff',
zIndex: 4
}],
...
}
Live demo: https://jsfiddle.net/BlackLabel/1mj80dc6/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
Related
I have a Gantt Chart with a Navigator bar at the bottom that look like this:
The image as you can see is hard to read because of the color of the milestones... my question is, how do we get a white border on each of these milestones... I tried on almost everything the docs say, on series, datalabels, etc and I can't make any border show, thank you for any help you may bring.
You just need to specify borderWidth and borderColor properties for the specific data points:
Highcharts.ganttChart('container', {
series: [{
...,
data: [
...,
{
...,
borderWidth: 2,
borderColor: 'black'
}]
}],
...
});
Live demo: https://jsfiddle.net/BlackLabel/xps2d6z3/
API Reference:
https://api.highcharts.com/gantt/series.gantt.borderWidth
https://api.highcharts.com/gantt/series.gantt.borderColor
Using Highcharts, I have implemented the basic bar chart and the legend on the bottom of this design. However, I am trying to figure out how to do the circles with the values.
Looking at annotations but this is not next to the point. Or somehow do a second legend?
Any advice on the best approach on this with highcharts would be appreciated.
You can create an annotation in any place on the chart. Example:
annotations: [{
labels: [{
shape: 'circle',
overflow: 'allow',
text: '1',
padding: 50,
point: {
x: 200,
y: 400
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8ucke60o/
API Reference: https://api.highcharts.com/highcharts/annotations.labels.point
I am using highcharts polar-spider chart. Is there any way to set color pattern in grid.
There is yAxis.alternateGridColor but i need pattern in color.
Poler chart
Please check below image so you can get idea, What i am talking about.
enter image description here
You can use plot-bands to achieve the required result:
yAxis: {
...,
plotBands: [{
color: 'red',
from: 20,
to: 50
}, ...]
}
Live demo: https://jsfiddle.net/BlackLabel/g62h0apb/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
I want to trace a vertical time line on the current day, but I didn't found solution on HighCharts documentation.
Like this :
You're looking for a plot line. See the documentation here: http://api.highcharts.com/highcharts#xAxis.plotLines.
The basic format is:
xAxis: {
plotLines: [{
color: '#FF0000', // Red
width: 2,
value: 5.5 // Position, you'll have to translate this to the values on your x axis
}]
},