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]
}]
Related
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
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]
}]
});
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
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/
I was playing around with Highcharts the last days.
One thing, I couldn't find out, is if it is possible to include subtitles to the legend to structure the results.
In my example: http://jsfiddle.net/gWEtB/
var allData={
products: ["Product1", "Product2", "Product3", "Product4"]
}
var colors={
'own': ['#3B14AF', '#422C83', '#210672', '#886ED7'],
'comp': ['#E7003E', '#AD2B4E', '#960028', '#F33D6E', '#F36D91'],
'new': '#00CC00'}
`$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Product Switching'
},
xAxis: {
categories: allData.products
},
yAxis: {
min: 0,
title: {
text: ''
},
labels:{
format:'{value} %'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
shared: false
},
plotOptions: {
column: {
stacking: 'percent',
dataLabels: {
enabled: true,
formatter: function(){
return this.percentage.toFixed(2)+' %';
},
color:'#FBF5EF'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
},
series: [{
name: 'Own product1',
data: [5, 3, 4, 7],
color: colors.own[0]
},
{
name: 'Own product2',
data: [5, 3, 4, 7],
color: colors.own[1]
},
{
name: 'Own product3',
data: [5, 3, 4, 7],
color: colors.own[2]
},
{
name: 'Own product4',
data: [5, 3, 4, 7],
color: colors.own[3]
},
{
name: 'Competitor 1',
data: [2, 2, 3, 2],
color: colors.comp[0]
},
{
name: 'Competitor 2',
data: [2, 2, 3, 2],
color: colors.comp[1]
},
{
name: 'Competitor 3',
data: [2, 2, 3, 2],
color: colors.comp[2]
},
{
name: 'Competitor 4',
data: [2, 2, 3, 2],
color: colors.comp[3]
},
{
name: 'Competitor 5',
data: [2, 2, 3, 2],
color: colors.comp[4]
}, {
name: 'Market Potential',
data: [3, 4, 4, 2],
color: colors.new
}]
});
});
I look for a way to add subtitles to the legend in this way:
Cannibalization:
o Own product 1
o Own product 2
o Own product 3
o Own product 4
Competition:
o Competitor 1
o Competitor 2
o ...
I am thankful for all help and information.
thx
You can use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter
Simple example: http://jsfiddle.net/gWEtB/1/
labelFormatter: function() {
switch(this.name)
{
case 'Own product1':
return 'Cannibalization<br/>'+ this.name;
break;
case 'Competitor 1':
return this.name + '<br/>Competition';
break;
case 'Market Potential':
return this.name + '<br/>Market title';
break;
default:
return this.name;
break;
}
}