In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:
With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal.
To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround?
Thanks!
You can create an additional hidden series with the same stack as the upper series. Example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
data: data2,
color: 'gray'
}, {
data: data1,
color: 'rgba(0,0,0,0)',
linkedTo: 'data1',
dataLabels: {
enabled: false
}
}, {
id: 'data1',
data: data1,
stack: 'A',
color: 'green'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
After a couple of weeks working with Highcharts, we are facing problems to generate charts that fit to out data structure. Would be nice if somebody can give us a hint.
Here is the problem:
We want to create a stacked area chart for 2 or more series.
Since our x-values have irregular intervals we tried to set up value pairs for each data point [x,y]
However, the area chart does not stack our y-values. Any suggestions?
Here is an example of our problem: link to jsFiddle
Thanks for your help!
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Irregular point intervalls stacked area'
},
yAxis: {
title: {
text: 'value'
}
},
plotOptions: {
area: {
dataLabels: {
enabled: true
},
stacked: 'normal'
}
},
series: [{
name: 'test 1',
data: [[0, 7.0], [1, 6.9], [1.5, 9.5], [3, 14.5]]
}, {
name: 'test 2',
data: [[0, 3.9],[1, 4.2], [1.5, 5.7], [3, 8.5]]
}]
});
});
you have to use stacking not stacked in plotOptions-> area
stacking: 'normal',
updated you fiddle at http://jsfiddle.net/FX7XE/2/
hope this will be useful for you
Highcharts v3.01
I'm trying to use a scatter plot to draw points within named categories (these are actually numeric, but out of series and I don't want gaps).
Using line graph types would work, but I'd rather not as I have potentially hundreds of series and scatter points are clearer.
The closest I have come is this:
EDIT - I would post a descriptive image, but apparently I need reputation points. Sigh.
Please see here: http://i117.photobucket.com/albums/o63/Harry_Flashman/close_zpsfe6d3ea2.png
This is using points referencing an x and y,
data: [{x:108432,test:100,y:0}, {x:109802,test:100,y:51}, etc. ]
I want to do exactly as above, but without the gaps.
The only way I can see to have a non-linear gap-free axis is with categories, which I've used before on other line-type graphs, but never with a Scatter Plot.
If I use the x-axis type "category" with a category array instead, it only assigns one scatter value to each and the remainder to ascending numeric categories (i.e. it doesn't group them if I use the point "name" option).
xAxis: {
type: category,
categories: ['108432','109802','110240', etc. ]
}
with datapoints that look like this:
data: [{name:'108432',test:100,y:0}, {name:'109802',test:100,y:51}, etc. ]
Ends up like this. Each scatter point gets its own category.
http://i117.photobucket.com/albums/o63/Harry_Flashman/not_zps31aa4fef.png
Any help appreciated, this would be great if I could get it to work.
Thanks!
Pat
PS. Added entire chart script (minus large amounts of data) below. This is the "almost works" version.
$('#container').highcharts({
chart: { type: 'scatter', zoomType: 'xy' },
title: { text: 'Revision vs Runtime Scatter' },
subtitle: { text: 'L3 Performance Test' },
xAxis: {
title: { enabled: true, text: 'Revision' },
startOnTick: true,
endOnTick: true,
showLastLabel: true,
showEmpty: false,
legend: { y: 120, floating: true, backgroundColor: '#FFFFFF' },
labels: { rotation: -90, align: 'right' },
categories: ['101831','101849','101850','101857','101861','101866','101868','101878','101879','101880','101881','101882','101883','101884','101885','101888','101894','101900','101903','101905','101908','101913','101914']
},
yAxis: { title: { text: 'Variance (%)' } },
legend: { layout: 'vertical' },
plotOptions: {
scatter: {
marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } },
states: { hover: { marker: { enabled: false } } },
tooltip: {
headerFormat: '<b></b>',
pointFormat: '<b>Test {point.test}</b><br/>r{point.x}<br/>{point.y}% change<br/>{series.name}'
}
}
},
series: [{
name: 'PRd',
data: [{x:101857,test:267,y:0}, {x:101861,test:267,y:-1}, {x:101866,test:267,y:-0}, {x:101868,test:267,y:-1}, {x:101878,test:267,y:-1}, {x:101879,test:267,y:-1}, {x:101880,test:267,y:-0}, {x:101881,test:267,y:-0}, {x:101882,test:267,y:-0}, {x:101883,test:267,y:-0}, {x:101884,test:267,y:-0}, {x:101885,test:267,y:-0}, {x:101888,test:267,y:-0}, {x:101894,test:267,y:-1}, {x:101900,test:267,y:-0}, {x:101903,test:267,y:-0}, {x:101905,test:267,y:-1}, {x:101908,test:267,y:-1}, {x:101913,test:267,y:0}, {x:101914,test:267,y:1}, {x:101831,test:430,y:0}, {x:101849,test:430,y:1}, {x:101850,test:430,y:1}]
}, {
name: 'Non-PRd',
data: [{x:101831,test:100,y:0}, {x:101849,test:100,y:51}, {x:101850,test:100,y:51}, {x:101857,test:100,y:52}, {x:101861,test:100,y:49}, {x:101866,test:100,y:50}, {x:101868,test:100,y:50}, {x:101878,test:100,y:50}, {x:101879,test:100,y:50}, {x:101880,test:100,y:50}, {x:101881,test:100,y:50}, {x:101882,test:100,y:50}, {x:101883,test:100,y:50}, {x:101884,test:100,y:50}, {x:101885,test:100,y:50}, {x:101888,test:100,y:50}, {x:101894,test:100,y:50}, {x:101900,test:100,y:50}, {x:101903,test:100,y:0}, {x:101905,test:100,y:50}, {x:101908,test:100,y:51}, {x:101913,test:100,y:50}, {x:101914,test:100,y:50}, {x:101831,test:10937,y:0}, {x:101849,test:10937,y:2}]
}]
});
});
Ok, fixed it via a workaround,
Essentially in Javascript I've added a position to the point arrays relating to which of the categories the point belongs to (generated via PHP, the categories are sorted ascending). Relevant bits are as follows:
xAxis: {
categories: ['r101831', 'r101849', 'r101850']
}
plotOptions: {
tooltip: {
headerFormat: '<b></b>',
pointFormat: '
<b>Test {point.test}</b><br/>
r{point.revision}<br/>
{point.y}% change<br/>
{series.name}'
}
}
series: [{
name: 'PRd',
data: [
{x:3,revision:101831,test:267,y:0},
{x:4,revision:101849,test:267,y:-1},
{x:5,revision:101850,test:267,y:-0}
]}
]
End result looks gorgeous, I love HighCharts.
Pic here: http://i117.photobucket.com/albums/o63/Harry_Flashman/fixed_zps9952d58d.png
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});