Develop Reference

Reduce space between stacked bar in Highcharts

I created stacked column in Highchart.
I used pointWidth: 50 to reduce column bar width, but space between stacked bar is too big.
How to reduce space between stacked bar?
[Updated question]
I also want to display stack name in legend, and user can click to stack name to hide stack in chart. Is it posible?
Here my source code:
JSfiddle link https://jsfiddle.net/viethien/ak2h1sfq/4/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 5,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 0,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0.1,
pointWidth: 50,
groupPadding: 0,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
series: [{
name: 'Component',
data: [[0,5], [1,3], [2,4], [3,7], [4,3]],
stack: 'Forecast'
}, {
name: 'Module',
data: [[0,2], [1,2], [2,3], [3,2], [4,2]],
stack: 'Forecast'
},
{
name: 'Board',
data: [3, 5, 5, 3, 2],
stack: 'Forecast'
},
{
name: 'Component',
data: [6, 4, 5, 8, 4],
stack: 'Real'
}, {
name: 'Module',
data: [3, 3, 4, 3, 3],
stack: 'Real'
},
{
name: 'Board',
data: [4, 6, 6, 4, 3],
stack: 'Real'
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>

You can set the groupPadding to higher value, which moves the column together for the group. Be aware that using the fixed value for the pointWidth disturbs the chart responsivity, but you can customize those values for particular chart width using the responsive rules: https://api.highcharts.com/highcharts/responsive
Demo: https://jsfiddle.net/BlackLabel/we1rc5vg/
plotOptions: {
column: {
stacking: 'normal',
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0,
pointWidth: 50,
groupPadding: 0.2,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
API: https://api.highcharts.com/highcharts/series.column.groupPadding
EDIT:
To create a stack legend item you need to add a series without data (that creates the legend button) and customize button functionality using the legendItemClick callback.
Demo: https://jsfiddle.net/BlackLabel/qLs219u4/
Notice that this solution may not work perfectly when stack will be hidden and the user will click on a particular series legend item from the hidden stack.
Once I have worked on really complicated example of it. If you want to know you can explore this topic here: https://www.highcharts.com/forum/viewtopic.php?t=42157

Can I with highcharts column stacking on hover not highlighting the whole serie

As you can see here jsfiddle.
If I using highcharts columns with column: {stacking: 'normal'}.
It highlight the whole series with the same name when you hover with the mouse over it.
Is there any way that I can only highlight the hovered element and does and not affecting the others in the series in any way?
I also want to keep the hover label.
Highcharts.chart('container', {
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: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

You can disable the inactive effect and use the hover state:
plotOptions: {
...,
column: {
stacking: 'normal',
states: {
inactive: {
enabled: false
},
hover: {
color: 'blue'
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/Lg796ha3/
API Reference: https://api.highcharts.com/highcharts/series.column.states.hover.color

use shared: true in your tooltip
Highcharts.chart('container', {
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: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
shared: true
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Align Highcharts bars right

I used the opposite attribute to move the xAxis to the right. How is it possible that the bars will also start on the right side?
Thanks!
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>

Found this from the documentation and managed to get it to work by setting
yAxis:{reversed:true}
By reversing the y-axis the bars go from right to left.
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
reversed: true,
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>

Hide Category in Highchart if all data is null

This is a sample fiddle : JSFIDDLE
Code
$('#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: -100,
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',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [null, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [null, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [null, 4, 4, 2, 5]
}]
});
What I want is if all series data for the Apple category is null then the chart should not display Apple at all.
This is a multi series data, where as I want a solution for single series data or multi series data or even for any other type of chart like pie chart etc.
Thanks,

highchart stacked column total data per categories

I want to get the total data per categories. The point.stackTotal only gives the total of the active data.
From the code example I pasted, I would like to know the total consumption per fruit. So even if I clicked Joe's name on the legend on upper right part (that makes all Joe's information on stacked chart inactive), I'd still know the total consumption of Apple (and any other fruits) of John, Jane, and Joe on mouseover each bar categories so apparently, what I am looking for is not the point.stackTotal.
$(function () {
Highcharts.chart('container', {
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: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});

I think that you should be able to show the total value for all visible and hidden columns for your category using stackLabels.formatter function. You can get more information about stackLabels in Highcharts API:
http://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
var x = this.x,
value = 0;
series = this.axis.series;
Highcharts.each(series, function(s) {
value += s.userOptions.data[x];
});
return value;
}
}
Here you can see very simple example how you can achieve something similar to required chart:
http://jsfiddle.net/h8f30uwo/
Best,