Is there a way to reverse the order of only the negative stacked bars?
I am using Highcharts to render a stacked bar chart. When the graph render the stacks it starts from the y 0-line and render them in order which result in that the negative stacks look reversed.
Example (http://jsfiddle.net/moppa/6tenw/2/):
If you read the graph from bottom to top you get the following result
All series except "Grapes" get the order Joe, Jane, John
The "Grapes" series get the order Jane, Joe, John
The grapes series is not complying with the order in the legend box. Is there any way to fix this?
Code to comply with Stack Overflow guidelines:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: false,
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'John',
data: [50, 30, 40, 70, 20]
}, {
name: 'Jane',
data: [20, 20, 30, -20, 10]
}, {
name: 'Joe',
data: [30, 40, 40, -20, 50]
}]
});
});
});
Related
Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance
You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter
How can I do a chart with overlapping and stacking columns?
I tried to do it with two axis, but I need both axis to be equals.
The max value of each axis will change lot of times, so I cannot set a max value for them.
How can i set both axis to be equals, or how can i do the chart with only 1 axis ??
$('#container').highcharts({
chart: { type: 'column' },
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
plotOptions: {
column: {
stacking: 'normal',
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
data: [150, 73, 80],
pointPadding: 0.1
},{
name: 'Profit',
data: [183.6, 178.8, 198.5],
pointPadding: 0.1
},
{
name: 'Employees Optimized',
data: [440, 90, 40],
pointPadding: 0.4,
yAxis: 1
}, {
name: 'Profit Optimized',
data: [203.6, 198.8, 208.5],
pointPadding: 0.4,
yAxis:1
}]
});
Fiddle
You can set multiple stacks and use a single yAxis for all series. Additionally you can also keep second yAxis that will be linked to the one that is used by all series, but placed on another side of the plot area.
JSFiddle: http://jsfiddle.net/aejr2L6e/
I am working on this demo. Why is the plot options color not getting the bar colors from the Color options (two colors)? As you can see it is taking color from only one for both colors.
$(function () {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
colorByPoint: true
},
series: {
pointWidth: 50
}
},
colors: [
'#D9844B',
'#3F4539'],
credits: {
enabled: false
},
title: {
text: 'Test',
style: {
color: '#2d2d2d',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Ecology & Economics', 'Economics Only'],
},
yAxis: {
tickInterval: 50,
max: 300,
title: {
text: 'Number of ROR Facilities'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b> : ' + this.y + '</b>';
}
},
series: [{
data: [29.9, 71.5],
dataLabels: {
enabled: true,
color: '#2d2d2d',
align: 'right',
x: -40,
y: 0,
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
I think the documentation is wrong. It says that colorByPoint is a bar/column option but you are correct it isn't working. Moving it to a series option and it does work:
plotOptions: {
series: {
pointWidth: 50,
colorByPoint: true
}
},
Updated fiddle.
Referring to #Mark answer, the Highcharts documentation is correct.
There is a difference between defining options in every series in Highcharts, especially bar and column series are different series.
You are using bar series (chart.type: 'bar'), but in plotOptions you are defining colorByPoint only for a column series which, obviously, does not even exist in your chart.
You have many solutions:
1) You can define colorByPoint inside a specific series options:
chart: {
type: 'bar'
},
series: [{
colorByPoint: true,
data: [4, 3, 5]
}]
2) you can define colorByPoint for all series:
chart: {
type: 'bar'
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
data: [4, 3, 5]
}]
3) You can define colorByPoint for all bar type series:
chart: {
type: 'bar'
},
plotOptions: {
bar: {
colorByPoint: true
}
},
series: [{
data: [4, 3, 5]
}]
4) You can use inverted column type series (which is actually a bar series):
chart: {
type: 'column',
inverted: true
},
plotOptions: {
column: {
colorByPoint: true
}
},
series: [{
data: [4, 3, 5]
}]
5) You can also define the color for each bar separately:
series: [{
type: 'bar',
data: [{
y: 4,
color: 'red'
}, {
y: 3,
color: 'blue'
}, {
y: 5,
color: 'green'
}]
}]
And even more. Above solution should be enough for you.
Remember, plotOptions.column will not work for chart.type: 'bar'.
I am using Highcharts to chart server performance stats, memory, cpu, etc. I want to add support incidents and change windows to these charts. At first I though the error bar was perfect, but I would need to rotate them to horizontal. As far as I can see, the chart can be rotated, but only the entire chart, not one series.
chart: {
type: 'spline',
inverted: true
},
Any ideas how I can get little horizontal bars on my chart, to represent the duration of incidents. Colouring according to severity wins bonus points.
use plotLines to darw lines on the chart
yAxis: [{
plotLines:[{
value : where do you want the line,
color: 'color for the line'
}]
}]
the same is possible for xAxis
if you want you can add them on demand using the method addPlotLine();
here is the example for plotLines http://jsfiddle.net/QWLhC/
chart.xAxis[0].addPlotLine({
value: where do you want the plotLine,
color: 'color of the plot line'
});
You can use simple line series, where each error bar will be separate series, but all will be connected to one master series, see example: http://jsfiddle.net/3bQne/646/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
line: {
color: 'red',
lineWidth: 10,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
}
}
},
series: [{
type: 'column',
name: 'some data',
data: [4, 11, 5, 16, 9, 22, 11, 1]
}, {
type: 'line',
name: 'errors',
id: 'err',
data: [ [0, 4],[3, 4]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [3, 1], [6, 1]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [2,10], [3,10]]
}]
});
I'm having a problem with Highcharts where each bar chart category is way too tall in a horizontal arrangement.
Here is an example:
The code used to generate the chart is as follows:
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'wordchart1',
defaultSeriesType: 'bar'
},
title: {
text: 'Word Frequency Distribution'
},
xAxis: {
categories: ['LIL POP SHOP','SWEET BOX','LITTLE BABY\'S ICE CREAM','SUGAR PHILLY','Please pick one:' ],
title: {
text: ''
}
},
yAxis: {
min: 0,
title: {
text: 'Word Frequency Analysis',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Word Frequency Analysis',
data: [89,43,32,24,3 ] }]
});
});
Any idea what may be the problem?
Thanks!
You can also define pointWidth: http://api.highcharts.com/highcharts#plotOptions.bar.pointWidth