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?
Related
I need to hide the inside datalabels if there is only one dataset which is greater than zero. What I mean by dataset is
series: [{
name: 'John',
data: [5, 3, 0, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 0, 2, 0]
}, {
name: 'Joe',
data: [3, 4, 3, 2, 0]
}]
If series.data[i] all are zero except one then hide the inside data labels. In the above case the 3rd and 5th dataset has 0,0,3 and 2,0,0 values only 1 non zero value so hide the inside datalabel.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter:function() {
if(this.y != 0) {
return this.y;
}
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 0, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 0, 2, 0]
}, {
name: 'Joe',
data: [3, 4, 3, 2, 0]
}]
});
Here I have highlighted which datalabel should need to be remove from inside..
In the formatter function you can check if at least two of the series have y value greater than 0.
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
var series = this.series.chart.series,
xPos = this.point.x,
filteredSeries;
if (this.y != 0) {
filteredSeries = series.filter((s) => (s.yData[xPos]));
return filteredSeries.length > 1 ? this.y : '';
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4971/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.formatter
If I'm using a scatter plot in Highcharts, is there any way to get drop lines? Drop lines are lines that go from the point back the the x-axis like this:
You can do this with a combination column-line chart.
See it in action here:
http://jsfiddle.net/8qvy79gv/
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
pointWidth: 2,
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});
I have this code here from this page: http://www.highcharts.com/demo/combo
$(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'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 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: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
And it produces this statistic here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
I would like to be able to set "John" and "Joe" inactive by default. Is there a way to make this? It should be possible to activate them though.
You want to initially draw in an "invisible" state?
{
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0],
visible: false // <-- set visibility to false
},
Fiddle here.
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 } }
}
]
I have been working on Highcharts just got into one trouble the problem is when there is not any value exist for some data on the chart then it displays 0 on it which looks bad kindly checkout the following jsfiddle the labels on the chart gets populated by the following function but i am not able to put check on it that it should display only those bars whose values are above zero on the chart
http://jsfiddle.net/CzHyC/3/ [KINDLY CHECK THE APPLE section on the chart]
$(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: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'blue'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'gray',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [0, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
This is the way I have dealt with this situation.
When you are creating your data points, instead of putting a 0, put a null.
So for example your data array will look like:
[null,3,4,7,2] instead of [0,3,4,7,2]
Fiddle