highcharts stacked columns and spline messed up yAxis display - highcharts

I have a highcharts with stacked columns and 2 splines. The primary yAxis represnts the y values of the stacked columns and the secondary yAxis represents the 2 splines. Take a look at the demo, one of the spline's y-values are not displayed correctly. If you hover on the points on the spline, you can see the data are correct but the displaying y scale is not. If I comment out "stacking: normal" setting, then the splines are displayed correctly.
http://jsfiddle.net/chicmob/w2Tux/
Is this a highcharts bug or is there some other settings I overlooked?
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
yAxis: [{ // Primary yAxis
min: 0,
max: 400,
tickInterval:100,
}, { // Secondary yAxis
min: -40,
max: 100,
tickInterval: 20,
opposite : true,
}],
series: [{
yAxis : 0,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
yAxis : 0,
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}, {
yAxis : 1,
type : 'spline',
data: [35, 60, 77, 56.7, 34, 55, 66, 72, 90, 45, 56, 60]
} , {
yAxis : 1,
type : 'spline',
data: [24.3, 12, 41.2, 12.1, 4, 45, 31, 21.5, 9.3, 7.7, 13, 22]
}]

You're applying stacking: 'normal' to all series. When really, you only want to apply it to the 1st 2 series. Take stacking: 'normal' out of plotOptions and put it in the 1st 2 series:
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{ // Primary yAxis
min: 0,
max: 400,
tickInterval:100
}, { // Secondary yAxis
min: -40,
max: 100,
tickInterval: 20,
opposite : true
}],
series: [{
yAxis : 0,
stacking: 'normal',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
yAxis : 0,
stacking: 'normal',
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}, {
yAxis : 1,
type : 'spline',
data: [35, 60, 77, 56.7, 34, 55, 66, 72, 90, 45, 56, 60]
} , {
yAxis : 1,
type : 'spline',
data: [24.3, 12, 41.2, 12.1, 4, 45, 31, 21.5, 9.3, 7.7, 13, 22]
}]
});
http://jsfiddle.net/w2Tux/2/

Related

highcharts fixed point width is not working when a series is hidden

Expected behaviour:
bar / point width should
be always same even after showing and hiding a series
Actual behaviour:
bars width is not same, middle bar is squeezed.
Live demo with steps to reproduce:
access the below fiddle and click on series 2 on legend(enabling), observe width of bars, middle bar's width is not same as others. I think highcharts is trying to fit the bars within the available chart width. how can I make sure bars are having equal width without space between them. I have tried with the below options
pointPadding: 0,
borderWidth: 0,
shadow: false,
pointWidth: 10,
https://jsfiddle.net/rammohanreddy201/mugp32hy/5/
`
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0,
shadow: false,
pointWidth: 10,
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
visible: false
},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
`
Product version
7.x
Affected browser(s)
tried with chrome, but is not dependent on browser type
The columns have the same width, they just overlap. If you want to show entire columns, make more space for them, for example by setting groupPadding to 0.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth: 10,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/knm5xvtd/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.groupPadding

Highcharts - is possible to have stackLabels only for a subset of the series?

I have a chart in which I combine a stacked column chart with a stacked line chart. I would like to have stackLabels for the column chart only, and suppress the stackLabels for the stacked line chart.
It currently looks like this:
How can I achieve stack labels ONLY on the column chart?
Also see https://jsfiddle.net/o1bqwu7r/4/ or :
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
series: {
stacking: 'normal'
},
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
type: 'column'
}, {
data: [2.9, 7.5, 16.4, 12.2, 14.0, 17.0, 13.6, 14.5, 21.4, 19.1, 9.6, 5.4],
type: 'line'
}, {
data: [14.0, 17.0, 13.6, 14.5, 21.4, 19.1, 9.6, 5.4, 2.9, 7.5, 10.4, 12.2],
type: 'line'
},]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
You can add a separate yAxis for the line series:
yAxis: [{
stackLabels: {
enabled: true
}
}, {
linkedTo: 0,
visible: false
}],
series: [{
data: [...],
type: 'column'
}, {
data: [...],
type: 'column'
}, {
yAxis: 1,
data: [...],
type: 'line'
}, {
yAxis: 1,
data: [...],
type: 'line'
}]
Live demo: https://jsfiddle.net/BlackLabel/1ojnakzw/1/
API Reference: https://api.highcharts.com/highcharts/yAxis

highcharts y axis label with offset is hidden when chart has no title

I'm using highcharts to display stackbars graph.
I'd the y axis label to appear on top of the y axis, that's why I'm setting its offset to -10. however, when the graph's title is not displayed I cannot see the axis label.
Here's an example with graph title and axis title
Here's an example without graph title and from some reason axis title disappears
Here's how I set my yAxis label:
yAxis: {
lineWidth: 2,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -20
}
},
updated Link
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [70, 0]
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
margin: [70, 0]

Highcharts/Highmaps - Halo effect on point hover not working in chrome and firefox

Please check the below jsfiddle.
http://jsfiddle.net/ErU8H/537/
var gfxPath = 'http://www.highcharts.com/components/com_demo/assets/demo/gfx/';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Pattern fill plugin demo'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotBands: [{
from: 100,
to: 200,
color: {
pattern: gfxPath + 'pattern3.png',
width: 6,
height: 6
}
}]
},
series: [{
type: 'area',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
fillColor: {
pattern: gfxPath + 'pattern1.png',
width: 6,
height: 6
},
states: {
hover: {
halo: {
size: 8,
opacity: 1,
zIndex:10,
attributes: {
fill: '#ffffff',
'stroke-width': 1,
stroke: '#0b9de8'
}
}
}
}
}, {
type: 'column',
data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
color: {
pattern: gfxPath + 'pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
});
The halo effect on point hover is not rendering properly in chrome and firefox only when we use pattern fill plugin. I ve to use patterns and same time wanted to implement halo effect on point hover. Any help on this?.
Simply set higher zIndex for a halo: http://jsfiddle.net/ErU8H/542/
states: {
hover: {
halo: {
attributes: {
zIndex: 10
}
}
}
}

HighCharts DataLabels Overlap

http://jsfiddle.net/nUCBj/1/
How can I prevent the datalabels from overlapping? I have tried using the formatter option and positioning the dataLabel using CSS position/top/bottom, etc... The datalabels are required. I can't just use the tooltip in it's place :-)
Thank you,
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 1,
shadow: true,
borderRadius: 1,
useHTML: true,
padding: 1
}
}
},
series: [{
name: 'test',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },{
name: 'test2',
data: [31, 80, 106.4, 22, 150, 17, 135.7, 14, 230, 181, 9, 54]
}]
});
});
The data attribute in the series can be passed in as an array of objects instead of as an array of numbers. Each object can define it's own dataLabels options (http://api.highcharts.com/highcharts#series.data). For the first series you can align the points to the left, and the second to the right so they do not overlap.

Resources