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
Related
I want to change the axis position of data label 6.02%. How do I change it because this data is dynamic. Here's my code :
Highcharts.chart('container' + this.random, {
credits: {
enabled: false
},
title: {
text: this.graphtitle,
align: 'left',
style: {
fontSize: '12px',
},
},
chart: {
height: this.graphheight,
width: 500,
animation: false,
backgroundColor: 'transparent',
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#000',
align: 'left',
format: '{point.y} %', // added percentage sign here
overflow: 'justify', // prevent labels from being cut off
distance: 10, // increase distance between labels
x: -40,
y: -20,
//css
style: {
fontSize: '10px',
textOutline: 0,
},
connectorWidth: 0,
},
animation: true,
showInLegend: true,
},
},
yAxis: {
labels: {
staggerLines: 2,
enabled: true,
align: 'left',
padding: 0,
reserveSpace: true
},
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
align: 'right',
symbolHeight: 10,
symbolRadius: 0,
symbolPadding: 1,
itemMarginTop: 10,
itemMarginBottom: 5,
textOutline: 0,
itemStyle: {
fontSize: '10px',
textOutline: 0,
}
},
series: [{
enableMouseTracking: false,
type: 'pie',
innerSize: '65%',
colors: this.graphcolors,
data: this.graphdata,
},],
});
},
below is the visual of pie chart:
I was trying this method but it's not working with my code any other method anyone would like to suggest ?
chart.series[0].data[1].update({
dataLabels: {
align: 'center',
verticalAlign: 'middle',
inside: true
}
});
I suppose graphdata here is dynamic data passed as a props. I came across a similar kind of bottleneck recently.
What I did to resolve this error is following:
You can sort your data ascending or descending using life cycle hooks e.g. getting the highest value element at 0 index or getting the lowest value element at 0 index.
data property of series in high charts expects a object with name and other custom properties to app where graph data has values like
['value 1', 1],
['value 2', 2]
{
name: this.graphdata[0][0],
y: this.graphdata[0][1],
sliced: false,
selected: true,
dataLabels: {
x: -25,
y: -15
}
},
{
name: this.graphdata[1][0],
y: this.graphdata[1][1],
sliced: false,
selected: true,
dataLabels: {
x: -60,
y: -25
}
},
this.graphdata[2],
],`enter code here`
In your code, you put negative values for plotOptions.pie.dataLabels.x and plotOptions.pie.dataLabels.y. This is probably not the best strategy if you push data dynamically...
When you use setData() to update your series, Highcharts optimizes labels position automatically.
Here is a simple example:
let chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
innerSize: '65%',
dataLabels: {
format: '{point.y}',
distance: 10
}
}
},
series: [{
colors: ['red', 'green', 'blue'],
data: [10, 20, 15]
}]
});
function getInt() {
return chance.integer({ min: 1, max: 100 });
}
document.querySelector('button').addEventListener('click', () => {
chart.series[0].setData([getInt(), getInt(), getInt()]);
});
#container {
width: 350px;
height: 350px;
}
<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chance#1.1.9/chance.min.js"></script>
<div id="container"></div>
<button type="button">Update</button>
I need to implement an scrollable column chart with Highcharts.
Question: How do I make the scrollbar always visible? Its visible when I try to scroll and hides back when not in use.
Highcharts.chart('container', {
chart: {
type: 'column',
scrollablePlotArea: {
enabled: true,
minWidth: 1800
},
marginRight: 30
},
scrollbar: {
enabled:true
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
scrollbar: {
enabled: true
},
},
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',
textOutline: 'none'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '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
}
}
},
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]
}]
});
Live demo: https://jsfiddle.net/5zkye8f7/9/
I am trying a chart that combines two chart types in a one single-chart (spline & polynomial). When I merge both of them the chart stops working. If I them separately they work. Can I merge both chart in one using highchart?
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Polynomial regression - with extrapolation and different style'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
tooltip: {
pointFormatter: pointFormatter
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
},
{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, .9)',
dashStyle: 'dash'
},
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js?8">
</script>
Highcharts Regression
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
That's a reported bug. Anyway while using a transparent color for the spline it works :
series: [{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, 0)', // transparent color
dashStyle: 'dash'
},
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
}
Updated Fiddle
could you please tell me how to remove shadow on hover in highchart ? When I hover the any slice it give shadow .
here is my code
http://jsfiddle.net/oupmgvjy/11/
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
title: {
text: 'Election'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: false
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
name: 'Versions',
data: [
['a', 55],
['b', 65],
['c', 65],
['d', 132],
],
size: '70%',
innerSize: '80%',
}]
});
});
in other words I need to remove shadow on hover .I already use shadow: false
What you want is achieved throug plotOptions -> series -> states -> hover. You just have to add the next option inside plotOption:
series: {states: {hover: {enabled: false}}},
Here you have the documentation.
Please, if this answer your question, mark it as solved :)
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,