Description: Set two column chart spacing to 0
Highcharts Column chart, set the spacing of each column in the x-axis
Plotoption: {
Column: {
Set the width of each bar itself
Pointwidth:
The x-axis uses only one bar per point, and this property sets the spacing between the bars of the adjacent two points.
If the x-axis has 2 bars per point, this property sets the spacing between the right and left bars of the left-hand point.
0.5 means that if the x-axis is 100px long, the spacing is 100*0.5=50px
pointpadding:0.5
If the x-axis has two bars at a point, this property sets the spacing between the two bars.
grouppadding:0.5
}
}
The following settings:
pointpadding:0,
grouppadding:0,
borderwidth:0,
:
Code: $ (function () { $(' #container '). Highcharts ({chart: {type:' Column '}, Title: {text:' Stacked Column chart '}, Xaxis: {categories: [' Apples ', ' oranges ', ' Pears ', ' grapes ', ' Bananas ']}, YAxis: {min:0, Title: {text:' Total fruit consumption '}, Stacklabels: {enabled:true, Style: {fontweight:' Bold ', Color: (Highcharts.theme&& Highcharts.theme.textColor) | | ' Gray '}}}, Legend: {align:' Right ', x:-70, VerticalAlign:' Top ', y:20, Floating:true, BackgroundColor: (Highcharts.theme&& Highcharts.theme.legendBackgroundColorSolid) | | ' White ', BorderColor:' #CCC ', BorderWidth:1, Shadow:false}, tooltip: {formatter:function() { return' <b> ' + This. x + ' </b><br/> ' + This. Series.Name + ': ' + This. Y + ' <br/> ' + ' total: ' + This. Point.stacktotal; }}, Plotoptions: {column: {stacking:' Normal ', pointpadding:0, grouppadding:0, BorderWidth:0, DataLabels: {enabled:true, Color: (Highcharts.theme&& Highcharts.theme.dataLabelsColor) | | ' White '}}}, series: [{name:' John ', data: [5, 5, 5,NULL,NULL]}, {name:' Jane ', data: [NULL, 2, 2, 2,NULL]}, {name:' Joe ', data: [NULL,NULL, 4, 4, 4] }] });});
Highcharts Continuous Stacked Area chart