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
Related
highchart issue screenshot
I want to adjust the highhcart bars spacing, I want to remove gaps and overllaping issue on two bar charts
You can control the gap by using groupPadding property. To remove the space between two columns in one group, set pointPadding and borderWidth to 0.
plotOptions: {
series: {
borderWidth: 0,
groupPadding: 0.1,
pointPadding: 0
}
}
Live demo: http://jsfiddle.net/BlackLabel/uhkfj93w/
API Reference:
https://api.highcharts.com/highcharts/series.bar.pointPadding
https://api.highcharts.com/highcharts/series.bar.groupPadding
I need legend colors in square form but its square boxes also appearing on graph which I don't need.
It is also appearing on the graph which I don't need.
You can add the below plugin to use legend symbol drawing method from pie series and set legend.symbolRadius to 0.
(function(H) {
H.seriesTypes.line.prototype.drawLegendSymbol = H.seriesTypes.pie.prototype.drawLegendSymbol;
}(Highcharts));
Highcharts.chart('container', {
legend: {
symbolRadius: 0
},
series: [...]
});
Live demo: http://jsfiddle.net/BlackLabel/0Lf2qupm/
API Reference: https://api.highcharts.com/highcharts/legend.symbolRadius
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I want to create an area chart of multiple series with percentual stacking using Hichstock. The time series may contain gaps which I want to visualize using the gapSize option.
When I render the chart with stacking: 'percent', the gaps are not fully empty. However, there is no issue when rendered with stacking: 'normal'.
Is there any option or incompatibility that I am not aware of, or is this likely a bug in Highstock?
Here is a JSFiddle that illustrates the problem: http://jsfiddle.net/8d5qzwrg/
Could be a bug in highcharts, a workaround is to use step, like this:
plotOptions: {
series: {
stacking: 'percent',
gapSize: 1,
step: 'center'
}
},
Working JSFiddle example: http://jsfiddle.net/ewolden/0rdjL1gq/2/
I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
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
}
}