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/
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
My question is about a column chart i making..
I don't understand why my label are not set on the height..
I try many things but i really don't know..
Here you can find a example :jsfiddle project
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 200
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
offset: 0,
labels: {
useHTML: true,
rotation: 0
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
lineWidth: 0,
tickPosition: 'outside'
},
yAxis: {
gridLineWidth: 0,
plotLines: [{
color: '#DDDDDD',
width: 1,
value: 0
}],
max: 0.92,
labels: {
enabled: false
},
title: {
text: ''
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
verticalAlign: 'top',
useHTML: true,
y: -20
}
},
},
series: [{
showInLegend: false,
negativeColor: '#F14646',
color: '#00B76C',
pointWidth: 40,
data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
}]
})
});
});
Thank you!!
It seems that plotOptions.column.stacking = 'normal' and plotOptions.column.y: -20 are causing most of the trouble. So, firstly you should set plotOptions.column.y: 0 (or remove it). Secondly, you could do one of the following
remove plotOptions.column.stacking entirely if you do not actually need it
some column labels may still be shown inside the bar instead of above, this is because there is not enough space above the column - one option is to set yAxis.max to a large enough value to guarantee space
if you do need stacking, use yAxis.stackLabels.enabled: true instead (and remove plotOptions.column.dataLabels if they interfere)
See the relevant Highcharts yAxis.stackLabels option documentation and their stacked column chart example.
I need to display the average of the values of my 2 datasets, but with a specific characteristic: when the users zoom the chart, the average line is recalculated ONLY with the values of the zoomed area.
How is this done?
Here is my JS:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Test'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
title: {
enabled: true,
text: 'Date'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: ''
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#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} date, {point.y} dose'
}
}
},
series: [{
name: 'ag',
color: 'rgba(223, 83, 83, .5)',
data: [[1426719600000,0.9659],[1426719600000,0.8928],[1445205600000,1.6428],[1445205600000,1.4711],[1445205600000,1.4209],[1445205600000,1.9574],[1445205600000,1.1226],[1445205600000,0.8159],[1445205600000,1.0114],[1445205600000,0.9168],[1445464800000,1.175],[1445464800000,1.2219],[1445464800000,1.2641],[1445464800000,1.3006],[1445464800000,0.9375],[1445464800000,0.8966],[1445464800000,0.9374],[1445464800000,1.0811]]
}, {
name: 'cf',
color: 'rgba(119, 152, 191, .5)',
data: [[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.015],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.015],[1445378400000,2.015],[1445378400000,2.015],[1445464800000,1.2254],[1445464800000,1.1065],[1445464800000,1.3482],[1445464800000,1.3015],[1445292000000,1.2297]]
}]
});
});
Thanks in advance!
This can be done several ways. I am going to show you the way to do it via chart.events.redraw. Whenever you do a zoom (or reset zoom) the chart is redrawn and this gives us a good hook into calculating and adding items to chart at that time. Here is the code block for the redraw event:
Here is a live demo.
I made it verbose so you can see each step. We are going to use getExtremes() to find out what are max and min xAxis and yAxis indexes are. From this we determine if the points in each series are within this "window". If they are not within the window we ignore. If they are then we add the y-value to a var and increment the point counter by 1. Once we are done we do a simple check to make sure we are not going to divide by zero and then calculate the average.
Once we have the average we then will draw a plotLine at the value of the average we calculated above. First we see if a plotline exists with our id. If it does we remove it. Then we create our new plotline.
There is some clean up to do as well (such as, do you include a 0-value plotline based on your business rules) but this should get you started.
Attempted to add code block in edit as original answer attempt would not let it through. Still unable to post code block.
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]
}]
});
});
});
The example on the demo page shows the prices and the volumes on 2 charts (http://www.highcharts.com/stock/demo/candlestick-and-volume).
Is it possible to render them in one chart only?
Thanks.
Update:
Ok, got it here: http://jsfiddle.net/eAFJ3/3/:
$('#container').highcharts('StockChart', {
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
navigator: {
enabled: false
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
lineWidth: 2
},
{
title: {
text: 'Volume',
style: {
color: "#DDD"
}
},
gridLineWidth: 0,
opposite: true
}],
tooltip: {
shared: true
},
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
color: '#DDD',
dataGrouping: {
units: groupingUnits
}
}, {
type: 'candlestick',
name: 'AAPL',
data: ohlc,
yAxis: 0,
dataGrouping: {
units: groupingUnits
}
}]
});
It takes a while to understand how to configure the charts... You have to define two Y axis and put the Volume xAxis as the first one in the series array. Otherwise it renders on top of the candles.