Grouping Legends in Highcharts - javascript

I have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar.
can some one help me?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
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: {
bar: {
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'
}]
});
});
I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.

Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
updated example:
http://jsfiddle.net/jlbriggs/6gw5P/2/
linkedTo:':previous'

I know this is an old issue, but setting showInLegend on your series, will work, and seems the easiest way.
showInLegend: false
Eg:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
showInLegend: false
}

You can't group the legends by stack, because then you'll lose the ability to identify the different components (IE either the individual series won't have a distinct color or the legend color won't match them). The legends map to the people because those are all distinct data sources and since you add them that way it displays them like that.
If you don't care about the different components having a distinct color, then you don't want a stacked bar chart at all. You can just have a normal bar chart with 2 series, male and female.
series: [{
name: 'Male',
data: [10, 7, 8, 9, 7]
},
name: 'Female',
data: [5, 5, 10, 6, 4]
}
}

You can link series using ids and linkedTo. In the example below, the first serie is linked to the second:
series: [
{
type: 'column',
name: '',
data: [],
linkedTo: 'second_serie_id', // <--- this
color: '#DE3733',
pointWidth: 1,
showInLegend: false,
},
{
id: "second_serie_id", // <--- this
type: 'scatter',
name: 'FFT 1',
data: [],
color: '#DE3733',
lineWidth: 0,
showInLegend: true,
states: { hover: { enabled: false } }
}
]

Related

How I can Add Start and end point in stacked bar chart in chart js?

I need to add starting and ending points on stacked charts , is there any way we can add it.
In The Given picture I need to start SaaS Quick Ratio from the 4 rather than 0 .
Setting to series.threshold give you possibility to serve base to the column, in your case you can start column from 4 at yaxis.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
series: [{
name: 'John',
threshold: 4,
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
Demo: https://jsfiddle.net/BlackLabel/f73zcu4t/

How to add markers to a grouped bar plot in Highcharts?

I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.
I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).
Is there a way to change it so the marks appear on the same row as the bar?
JSFiddle
Highcharts Config
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['One', 'Two', 'Three']
},
tooltip: {
enabled: true
},
series: [
{
name: '2015',
data: [7, 8, 9]
},
{
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [5, 6, 6],
type:'scatter'
},
{
name: '2016',
data: [9, 9, 10]
},
{
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [10,12,13],
type:'scatter'
}
]
}
Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.
series: [{
name: '2015',
data: [7, 8, 9]
}, {
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [
[-0.15, 5],
[1 - 0.15, 6],
[2 - 0.15, 6]
],
type: 'scatter'
}, {
name: '2016',
data: [9, 9, 10]
}, {
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [
[0.15, 10],
[1 + 0.15, 12],
[2 + 0.15, 13]
],
type: 'scatter'
}]
In pointFormatter:
plotOptions: {
scatter: {
tooltip: {
pointFormatter: function() {
return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
}
}
}
},
example: http://jsfiddle.net/kh8b4jy3/

Highcharts Area Chart - Specifying Area Color

I'm new to coding, and I feel like this answer shouldn't be very difficult; yet, I've struggled with it for about two days now and so I'm looking for help.
I'm trying to specify the colors of areas in Highcharts' "Area Chart with Negative Values". I'm using Highcharts' basic template, but can't figure out how to change the colors of the respective areas.
Here's the JSfiddle that includes me trying to specify the color; when I do so, the chart fails to run. (Notice I've tried to change the color of the "john" series).
http://jsfiddle.net/aoouym2o/
I followed the instructions given in HighCharts' API, but I can't make it work. Here's the API section: http://api.highcharts.com/highcharts#plotOptions.area.color
Again, here's the original code without me trying to change any color:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area 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]
}]
});
});
What am I missing?
You did it exactly right, you were just missing a comma before your added color setting ;)
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#FF0000'
},
Here is a link to a modified fiddle. (updated link to the working version)
You can set color for the chart by specifying it in each series object:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#0000FF'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#FF0000'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#00FF00'
}]
Just change color setting :P
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color : '#f7a35c'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#7cb5ec'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#90ed7d'
}]
and if you want to change the color of the number > 0 watch
http://www.highcharts.com/docs/chart-concepts/series
Add option:
plotOptions: {
series: {
lineColor: '#303030'
}
},

how can i plot stacked columns and a single column in highcharts together?(multi Stacked)

my data is something like below.
i want to show them in one single chart in highcharts.
category [jack jane julie john]
i have 3 series of grades like this:
homework [2 1 2 3]
midterm [5 4 6 6]
final exam[10 9 11 10]
i want them to be stacked.
and their ages:
ages [18 22 17 24]
my problem is i know how to stack and know how to plot columns but not they together.
You can set different stacking groups:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['jack', 'jane', 'julie', 'john']
},
yAxis: [{
title: {
text: 'Grades'
}
}, {
title: {
text: 'Age'
},
opposite: true
}],
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
// first stack
{
data: [2, 1, 2, 3],
stack: 0,
yAxis: 0
}, {
data: [5, 4, 6, 6],
stack: 0,
yAxis: 0
}, {
data: [10, 9, 11, 10],
stack: 0,
yAxis: 0
},
// second stack
{
data: [18, 22, 17, 24],
stack: 1,
yAxis: 1
}]
});
});
http://jsfiddle.net/bhSrh/

Highcharts Combo Graph Overlapping eachother

I want to implement a Combo Graph with
1. Pie Chart
2. Column 'Normal'
3. Spine
Now my problem is that if the column values are big, it overlaps the pie chart which does not make great viewing, I have a sample at JS Fiddle sample
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Jane',
data: [9, 9, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 9, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [20, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
please give me some hint on how to solve this, one thing that comes to mind is set X range larger then max value of the column but not sure how to do that either.
You can try to set maxPadding: 0.5 or some higher value, see: http://jsfiddle.net/ykgNR/1/
I advice you to use two separate charts.
one for pie and other one for combination of line and column.
is there any compulsion for you to display both combination chart and pie chart in same chart section?

Categories