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
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 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
I'm new with highcharts and what I'm trying to achieve is to have fixed bar height/width and fixed spacing between bars in highcharts. Either there are 20 bars or only 3 of them, the bar height/width and space between bars should remain the same. And the highchart itself should be with fixed height, f.e. 300px. I'm not sure this is doable, but here is an example of what I'm trying to achieve:
https://imgur.com/BmyZjvb
https://imgur.com/OMiZZ2R
Yes, you need to only set fixed axis extremes:
xAxis: {
min: 0,
max: 4
},
yAxis: {
min: 0,
max: 100
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5011/
API Reference:
https://api.highcharts.com/highcharts/xAxis.min
https://api.highcharts.com/highcharts/xAxis.max
I don't know if there is a better solution, but this is one solution:
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', '', '', '']
},
series: [
{
data: [5, 3, 4, 0, 0, 0]
}
],
http://jsfiddle.net/aabramya/jfdv3z65/7/
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
I want to increase the chart grid lines to fill the width of the graph.
I have got it till this point: https://jsfiddle.net/mukeshshamra1201/8pu9a5c4/97/
I have used y-axis property to achieve something, but I am not able to figure out the rest.
yAxis: {
min: 0,
title : "",
gridLineDashStyle: 'ShortDash',
labels: {
align :"left",
x:-6,
y:-3
}
}
I want something kike this :
Set spacingLeft and spacingRight to 0:
chart: {
...
spacingLeft: 0,
spacingRight: 0
}
Live demo: https://jsfiddle.net/BlackLabel/3Lpsz0hd/
API Reference: https://api.highcharts.com/highstock/chart.spacing