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
Related
I'd like to create a highcharts scatter diagram showing wind direction (y) on a time axis (x). The color of the points should be calculated using the wind speed. How could this be done? The result should look like the attached example, where red dots indicate high speed, green and yellow low speed.
One solution would be to split the data into 12 series (Beaufort 1-12) with different colors, shown in the same chart, but I would prefer to find a method to calculate the colors for each point seperately.
You can use colorAxis with dataClasses and colorKey for the series. For example:
colorAxis: {
dataClasses: [{
to: 10,
color: 'green'
}, {
to: 50,
from: 10,
color: 'yellow'
}, {
to: 100,
from: 50,
color: 'red'
}]
},
series: [{
colorKey: 'speed',
data: [{
x: 0,
y: 1,
speed: 10
}, ...],
type: 'scatter'
}]
Live demo: http://jsfiddle.net/BlackLabel/5po1Lqym/
Docs: https://www.highcharts.com/docs/maps/color-axis
API Reference: https://api.highcharts.com/highcharts/colorAxis.dataClasses
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
Just like in the above image, I'm trying to add the background shadows on the bar chart. How can we implement this?
I need bar chart like this can any one help me here.
You can use plotBands:
yAxis: {
plotBands: [{
from: 0,
to: 10,
color: '#828282'
}, {
from: 10,
to: 20,
color: '#949494'
}, ...]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4779/
API Refernece: https://api.highcharts.com/highcharts/yAxis.plotBands
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