I have a chart with 3 series, you can see image.
My problem is 3 column is be overlapped.
So anyone can help me fix this.
Thanks!
Use pointRange to define column size.
plotOptions: {
series:{
pointRange: 5000 // 5s
}
}
Related
I have this chart:
I have 2 issues:
How can I make the bars thicker and add space between them because they are so small that they blend in each other.
As you can see in the photo, the highest value is 3 but how can I stop the chart after that so there is no blank space like in the photo between 3 and 4.
Thank you very much!
Reduce pointPadding and groupPadding properties or increase chart's height.
Set yAxis.maxPadding to 0:
yAxis: {
...,
maxPadding: 0
}
Live demo: http://jsfiddle.net/BlackLabel/s3c7yz2w/
API Reference:
https://api.highcharts.com/highstock/series.column.pointPadding
https://api.highcharts.com/highstock/series.column.groupPadding
https://api.highcharts.com/highstock/chart.height
https://api.highcharts.com/highstock/yAxis.maxPadding
I was working with highchart on group columns , well here I had to reduce the size of column but by doing this highchart weirdly managing space between columns when data is less, so I was searching for solution where I found bellow link which is realy helpfull
https://github.com/highcharts/highcharts-react/issues/77
You can manage the space by using pointPadding and groupPadding properties:
plotOptions: {
series: {
pointPadding: 0.1,
groupPadding: 0.3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4875/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
I made 2 pie charts using Highcharts from different data.
So they have different number of data as well as legends.
But I want to align them properly so chart by chart, legend by legend.
How can I do this?
I tried to set max-height of pie chart legends but that not works.
Any help would be appreciated.
You will need to use the chart.spacingBottom and chart.spacingTop (API Documentation) to create the same space on both charts like this :
chart: {
spacingTop:15,
spacingBottom:18
},
Fiddle
With vertical legend layout it will be better to use margin property:
chart: {
type: 'pie',
marginBottom: 80
},
Live demo: https://jsfiddle.net/BlackLabel/a62ztm5o/
API: https://api.highcharts.com/highcharts/chart.marginBottom
This requirement may sound bit weird but unfortunately It is the requirement which I have to fulfill. In Highcharts Line chart, can we hide the line and just display the points? Something like the following link: 8bdovxn4
Using the above fiddler link, I have set the line width to 0. But on hover It displays the line. Is It possible to hide the line on hover too?
Set lineWidthPlus property on hover state to 0. As an alternative, you can use scatter series type: http://jsfiddle.net/BlackLabel/0ke4or2z/
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/614fr8oj/
API: https://api.highcharts.com/highcharts/series.line.states.hover.lineWidthPlus
I am trying to show the zero value in the trellis horizontal bar charts. I have tried using the minPointLength to show the zero value. but its not working, and I have tested for another stocked vertical charts its working, but the issue with horizontal charts only. working example for vertical charts vertical charts
code i have tried:
plotOptions: {
column: {
minPointLength: 3
}
},
please find the horizontal charts jsfiddle.
thanks
Notice that your plotOptions refer to the column type of the series, but the ones that you use are bar series. If you change the code from your question to:
plotOptions: {
bar: {
minPointLength: 8
}
},
everything seems to work fine.
Live demo: http://jsfiddle.net/kkulig/c4tbpqLe/