I'm trying to control the order in which new (after first render) series are added to a stacked column chart in Highcharts. Right now, if you simply use addSeries, the newly added series is added to the bottom of the stack. Here's a simplified version of what I'm doing
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'base',
data: [10, 20, 30]
}, {
name: 'sec',
data: [30, 20, 10]
}]
});
var i = 0;
$('#add').on('click', function (e) {
chart.addSeries({
data: [32, 43, 42],
name: ++i,
index: 0 //??????
});
});
Here's a fiddle of this: http://jsfiddle.net/6bCBf/
Any one can think of a way to reverse/control where Highcharts inserts the new series?
I've tried setting the index of the new series to 0, but that does nothing. Setting it to -1 adds the new series to the bottom of the array, but then that 'stacking' does not work properly
You can set index and zIndex to keep order between layers, then add serie with appropriate parameters.
Example: http://jsfiddle.net/6bCBf/5/
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'base',
data: [10, 20, 30],
index:2,
zIndex:10
},
{
name: 'sec',
data: [30, 20, 10],
index:1,
zIndex:9
}
]
},function(chart){
$('#add').on('click', function (e) {
chart.addSeries({
data: [32, 43, 42],
index: 0,
zIndex:1
});
});
});
Highcharts also supports a yAxis.reversedStacks property which, if set to false, will reverse the order of the stacking data points. In the OP's JSFiddle, the first series, "base", appeared on the top of the chart, while the second series, "sec", appeared below it. Setting reversedStacks: false as in this updated JSFiddle reverses that order, and the new series appears on the top of the stack instead of the bottom.
Related
Using Chart.js, trying to display a diagonal line (representing goal) over a bar graph (representing actual. I would like the actuals line to overlay the bar graph.
var ctx = document.getElementById(id).getContext('2d');
window[id] = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Actual',
data: [10, 20, 30, 40],
backgroundColor: 'steelblue',
}, {
label: 'Goal',
data: [10, 20, 30, 40],
fill:false,
// Changes this dataset to become a line
type: 'line',
backgroundColor: "red",
borderColor:"red"
}],
labels: ['January', 'February', 'March', 'April']},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
But my chart comes out looking like this:
I've tried changing the order using the order: parameter for the bar and line but it did not change the appearance.
SOLUTION
The way I got this to work was to have the line elements first in the dataset.
Adding order:1 and order:2 to the bar/line datasets did not affect the display.
I'm trying to have multiple optically synchronized charts. There is no problem with single series chart. But If I mix column and area chart, it starts to behave strangely.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
height: 200,
},
xAxis: {
startOnTick: false,
minPadding:0,
ordinal: false,
crosshair: true,
endOnTick: false,
min:1532767826000,
max:1532789426000,
type: 'datetime',
},
series: [{
type: 'area',
name: 'Serie1',
data: [ [1532767826000, 0],[1532789426000, 0] ]
},
{
type: 'column',
name: 'Serie1',
data: [ [1532767826000, 0],[1532789426000, 0] ]
}]
});
Example http://jsfiddle.net/fpnayfuq/49/
I'm not able to force area chart to have same x-axis start point as the other single series charts.
If you force all series to have the same pointPlacement, it should work:
plotOptions: {
series: {
pointPlacement: 'on'
}
},
Working example: http://jsfiddle.net/ewolden/fpnayfuq/58/
I need to create a line chart where the xAxis would show vertical gridlines instead of horizontal ones, just like in "charts: {inverted: true}" case (example on the screen below).
vertical gridlines effect
Unfortunately, that solution isnt' entirely accurate because it switches the order of the data as well, so in fact the Distance scale ends up at the side of the chart, while it should be at the bottom of it, like here:
proper data order but with horizontal gridlines
My question is: is there a way to make gridlines display vertically without switching the order of the data?
Here's the exemplary chart from Highcharts demo, where I would like to change the display of the gridlines:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
labels: {
formatter: function () {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
PS I would prefer not to tamper with the order of the data that's being passed to the function.
Have you consider using xAxis.gridLineWidth and xAxis.gridLineColor parameters?
http://api.highcharts.com/highcharts/xAxis.gridLineWidth
http://api.highcharts.com/highcharts/xAxis.gridLineColor
$(function() {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
gridLineWidth: 1,
labels: {
formatter: function() {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
gridLineWidth: 0,
labels: {
formatter: function() {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [
[0, 15],
[10, -50],
[20, -56.5],
[30, -46.5],
[40, -22.1],
[50, -2.5],
[60, -27.7],
[70, -55.7],
[80, -76.5]
]
}]
});
});
Here you can see an example how it can work:
http://jsfiddle.net/r3wd8j7t/1/
I'd like to have the lines linking each data block, like the attached screenshot from Excel. Even better would be if the line could change color based on it's angle. I can't seem to find anything in the documentation to create this style chart. Any ideas?
JSFiddle - Same Bar Chart (without connectors)
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Row1', 'Row2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Data1',
data: [9, 4]
}, {
name: 'Data2',
data: [12, 6]
}, {
name: 'Data3',
data: [15, 7]
}, {
name: 'Data4',
data: [16, 8]
}, {
name: 'Data5',
data: [19, 7]
}]
});
});
I wonder is it possible to change line color in highchart for specific y range using some kind of function, I really don't know how to achieve this, this is my idea, as a beginner I don't know how to write function to do this, function which I want to develop would like this
Added in fiddle have a look FIDDLE
function range(ystart,yend,ycolor,xpoint){
// I do not know how to achieve this,
// I am interested send y range as a argument suppose in current example
// y : 1 - 6 should be in red color and
// x = 36 should have marker in yellow color
// So I would like to call like this
range(1,6,"#F90B0B",34)
}
This is actual code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6],
[24, 7],
[19,8],
[15, 9]
]
}]
});
});
Thank in advance for all volunteers
The easiest way would be to separate the data and create separate series (with different colors) for the different ranges. That would mean, of course, that you would have to create a custom legend.
Edit to your function:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6]
],
color: "#F90B0B"
},
{
name: 'Test Plot2',
data: [
[28, 6],
[24, 7],
[19,8],
[15, 9]
],
color: "#F909F9"
}]
});
});
At this moment is it not supported, only by two series, but in the nearest feature it should be available.