I'm trying to achieve in Highcharts a line chart that has from/to areas. For example, in the chart below you can see two from/to areas in gray (Jan 2001/Dec 2001 and Dec 2007/March 2009 respectively). Can this be done in Highcharts?
Yes it can be added by plotBands.
xAxis: {
plotBands: [{
color: '#FCFFC5',
from: 4.5,
to: 7.5
}]
},
Related
So ive been looking to see if its possible in highcharts to do the following:
on the x-axis it isnt showing the actual x-axis values it is custom labels that segment the chart into 3 sections.
Anyone know if this is possible?
The implementation will be very easy with Highcharts. You can just use two x-axes, hide the first one and adapt the second one for your needs. For example:
xAxis: [{
visible: false
}, {
lineWidth: 2,
min: -0.5,
max: 2.5,
gridLineWidth: 1,
categories: ['30 Days Before', 'Insight Period', '30 Days After']
}]
Live demo: http://jsfiddle.net/BlackLabel/12zbg0m3/
API Reference: https://api.highcharts.com/highcharts/xAxis
I need to make somewhat of a grid which is dotted, like on the image here:
How would one go on and do about something like this? I know how to do gridlines full, but I want to have dotted gridlines.
You can use gridLineDashStyle to make dotted gridlines:
xAxis: {
gridLineDashStyle: 'dash',
gridLineWidth: 1
},
More style examples can be found here can be found here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/
I am using this example to draw highchart of column type.
https://www.highcharts.com/demo/column-basic
The example shows different color combination for month Jan, Feb etc. I am wondering, is it possible to have same color for each month? That is, for each bar in Jan month have same color set say, red, then Feb, will have color green for each bars and all bars from March will have orange etc.
I tried to find out the way, but unable to do so.
Any help is appreciated.
Thanks.
colorByPoint: true
did the trick. This worked for me. You can use this in your series option.
Eg.
series: [{
name: 'Jan',
data: [10,20,50,60],
colorByPoint: true,
color: red
}, {
name: 'Feb',
data: [20,50,30,80],
colorByPoint: true,
color: green
},{
....
This might be useful for someone.
Is there any way to show the summation of area charts value in highcharts without using line chart? I would like to know any other alternatives.
You can use area series with stacking: 'normal' and set lineWidth and lineColor for the series at the top.
series: [{
lineWidth: 2,
lineColor: 'red',
...
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/sft7bu8r/
API Reference: https://api.highcharts.com/highcharts/series.area.lineColor
Current:
Expected One:
is there any way to fill that gap with a specific color in highcharts, i'm using chart type xrange here
thanks in advance code link in the comment
The simplest solution is to use yAxis plotBands:
plotBands: [{
from: -0.045,
to: 0.04,
color: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/z10pjmcr/