Highcharts combine chart types - highcharts

I am using Highcharts and would like to combine 2 types of chart.
I would like a Bar with negative stack (changing the chart type to column) combined with Column with negative values so for each category, I have both positive and negative values.
I can't find any example of doing this so I don't even know if this is possible.
I did have a thought about doing something with the series like nested series but again don't know if this is possible and can't find an example.
If what I'm trying to do possible?
Column with negative values
// Age categories
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
Bar with negative stack
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});

Thanks to #Pawel Fus, I was able to do what I wanted and to remove the duplicate legend labels, I added showInLegend: false, in the series I wanted to hide the legend
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
colors: Highcharts.getOptions().colors.splice(0, 3),
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: true
}
},
series: [{
stack: 'john',
name: 'John',
data: [5, 3, 14, 7, 2]
}, {
stack: 'jane',
name: 'Jane',
data: [2, 12, 3, 2, 1]
}, {
stack: 'joe',
name: 'Joe',
data: [3, 4, 4, 2, 5]
}, {
showInLegend: false,
stack: 'john',
name: 'John',
data: [-5, -3, -4, -7, -2]
}, {
showInLegend: false,
stack: 'jane',
name: 'Jane',
data: [-2, -2, -3, -2, -1]
}, {
showInLegend: false,
stack: 'joe',
name: 'Joe',
data: [-3, -4, -4, -2, -5]
}]
});

Related

how to reserved bar in stacked bar chart for sequential

how to sequential stacked bar chart and example want the bar chart to start at john and finish at joe
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
example

Highcharts: stacked bar -> How to change color?

i like to change the color of the bars in a stacked bar chart in highchart. I did not found the option where i can set the color foreach value. Joe should be red, Jane yellow, and John black.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
You can add the field color in your serie like:
series: [{
name: 'John',
color: '#ff8080',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
color: '#ffff00',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
color: '#000000',
data: [3, 4, 4, 2, 5]
}]

Give the columnrange different colors

I have built some HighChart and I would like to give the 3 columnrange different colors (And not just blue as the current highChart Please see the jsfiddel link below) to make it simple for persons to see the difference when taking a look at my HighChart.
https://jsfiddle.net/LLExL/7281/
Highcharts.chart('container',
{
chart: {
type: 'columnrange',
inverted: true,
height: 200,
spacingLeft: 30
},
credits: {
enabled: false
},
title: {
text: null,
style: {
"fontSize": "10px"
}
},
subTitle: {
text: null
},
legend: {
enabled: false,
},
plotOptions: {
series: {
pointWidth: 30
}
},
xAxis: {
min: 1,
max: 1,
categories: ['', ''],
title: {
text: null
},
labels: {
rotation: 90
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime',
title: {
text: null
},
labels: {
rotation: -45,
style: {
"fontSize": "10px"
}
},
tickInterval: 1800000,
gridLineWidth: 1
},
series: [{
data: [
[1, 1483337940000, 1483338000000],
[1, 1483338300000, 1483339740000],
[1, 1483340580000, 1483340640000],
[1, 1483340640000, 1483340820000],
[1, 1483340820000, 1483341000000],
[1, 1483342800000, 1483342860000],
[1, 1483342860000, 1483342920000],
[1, 1483342920000, 1483342980000],
[1, 1483346460000, 1483346520000],
[1, 1483347120000, 1483347180000],
[1, 1483347180000, 1483348440000],
[1, 1483348440000, 1483348620000],
[1, 1483348620000, 1483348740000],
[1, 1483350180000, 1483350240000],
[1, 1483350420000, 1483351380000],
[1, 1483353300000, 1483353420000],
[1, 1483355280000, 1483355340000],
[1, 1483358580000, 1483359780000],
]
}]
}
);
You can replace the each point array with object and declare separate color.
{x:1, low: 1483337940000, high:1483338000000,color: 'red'},
Example:
https://jsfiddle.net/ch4683os/
Zones would probably be better for you here. That way the color belongs to the chart not the data. Zone value represents up to next x range.
Here's the example for Highcharts docs:
Highcharts.chart('container', {
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
zones: [{
value: 0,
color: '#f7a35c'
}, {
value: 10,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}]
}]
});
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/
Also see: http://api.highcharts.com/highcharts/plotOptions.column.zones

Display Stack label Highcharts

Im using the stacked charts from Highcharts but would like to include the stack name below the stacked bar charts.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked-and-grouped/
js
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
Iin this chart, I want to show 'MALE' & 'FEMALE' below the stack.
How can I do it using Highcharts
Something like below..Where you display the stack name - "Maintenance", "other" and "peak"
I think that in your case you may use grouped-categories plugin. You may find this plugin on a Highcharts plugins repository:
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column",
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [4, 14, 18, 5, 6, 5]
}, {
data: [4, 14, 18, 5, 6, 5]
}, {
data: [4, 14, 18, 5, 6, 5]
}],
xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon"]
}]
}
});
});
And here you can find simple example how your chart may work with this plugin: http://jsfiddle.net/TFhd7/943/

Negative Fill color in AreaSpline Graph

I want to fill area color above the spline in area spline chart.
I have tried to set negative fill color but no result.
Can anyone let me know how to fill area color above the spline rather then below?
Any help will be appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)',
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12],
negativeFillColor: '#000000'
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4],
negativeFillColor: '#000000'
}]
});
})
;
Thanks,
M
Well, threshold should work. Just you need to set
endOnTick: false
maxPadding: 0
threshold: max_value_in_data
See: http://jsfiddle.net/3bQne/1076/
Code:
var data = [3, 4, 3, 5, 4, 10, 12];
Array.prototype.max = function() {
return Math.max.apply(null, this);
}
$('#container').highcharts({
chart: {
type: 'areaspline'
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
plotOptions: {
areaspline: {
threshold: data.max(),
}
},
series: [{
data: data,
negativeFillColor: 'rgba(255, 0, 0, 0.5)'
}]
});

Resources