Highcharts add points but not to all categories - highcharts

I would like to add points to my highcharts without expecting to fulfill all the categories.
is it possible? any work around?
I've done the same when X data is based on time, but could it be done with other kind of data?
For example one serie could be just Apples and Oranges, but not the other categories. See code:
$(function () {
$('#container').highcharts({
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: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
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: [[Apples,5], [Oranges, 6]]
}, {
name: 'Jane',
data: [[Grapes,2]]
}, {
name: 'Joe',
data: [[Grapes,2], [Bananas, 4]]
}]
});
});

You can use the indexes into your categories: http://jsfiddle.net/BwyAj/
var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
...
series: [{
name: 'John',
data: [[categories.indexOf('Apples'),5], [categories.indexOf('Oranges'), 6]]
}, {
name: 'Jane',
data: [[categories.indexOf('Grapes'),2]]
}, {
name: 'Joe',
data: [[categories.indexOf('Grapes'),2], [categories.indexOf('Bananas'), 4]]
}]

Related

Highcharts stacked column don't show the stacked with min value

Can anyone help me with highcharts stacked column my problem is that i have big difference with data and the graph show me only the big data.
i try minPointLength but don't help in my case. please check here the example: http://jsfiddle.net/17jd6frn/
$(function () {
$('#container').highcharts({
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: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '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,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [2000, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [7000, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
One option is to use a logarithmic scale (http://api.highcharts.com/highcharts/yAxis.type). It will show your small numbers and your large numbers. Note, that you can't show 0 or negative numbers on a log scale.
yAxis: [{
type: "logarithmic",
min: 1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}],
http://jsfiddle.net/17jd6frn/1/
You have two options with you.
1.) Either use "minPointLength". This is the minimum value for for the y-axis plotting.You can use this setting and set this to a value which will always be shown in case the value gets too small for plotting. You can use this setting like
$(function () {
$('#container').highcharts({
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: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '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,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
},
minPointLength: 5
}
},
series: [{
name: 'John',
data: [7000, 5, 1, 1, 2]
}, {
name: 'Jane',
data: [2000, 10, 1, 1, 2]
}, {
name: 'Joe',
data: [5, 1, 1, 1, 2]
}]
});
});
2.) You can change the "stacking" option to 'percent' and remove the 'minPointLength' . This will cause the stacked columns to appear w.r.t to their value percentages.
Please play with the above two options and see if it works for you !!!

How to make stacked column graph to show total data value on top

I want to show total of all stacks of column to display on top of each column below is the link how i want to get the chart.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/
Below is the code i am using.
$(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',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
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'
}]
});
});
You have to use stackLabels. You missed it in your code. You can find it in yAxis -> stackLabels
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color:'gray'
}
}
Here is how:
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color:'gray'
}
}
},

Want Stacked column highchart to represent data in two colomn

i want to represent two categories of data in stacked column chart. Though i am able to get one column with stacks showing its sub category data.Below is the code i am trying
$(function () {
$('#container').highcharts({
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: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
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: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
I want a chart which can full fill below mentioned requirement. I want to show month wise purchase of 4-wheeler(cars) and 2-wheeler(bikes and scooter) sale monthwise for example for month of october if we have data for cars as ford=25,Maruti=30,Honda=20,BMW=15 and for 2-wheeler Bajaj=70,Yamaha=60,Honda=40,Suzuki=10. Now i want my chart to show each 4-wheeler as one stacked column showing all its data(Ford,Maruti,Honda,BMW) as its stacks and same for 2-wheeler . Any help will be appreciated.
I advice to familiar with grouped plugin, https://github.com/blacklabel/grouped_categories/ which seems to be solution of your problem. Let us know if it correct.

horizontal scroll bar in highcharts

I am trying to get the horizontal scroll bar to work in my highcharts graph. Though the horizontal scroll bar appears, there is no space to scroll. The graph is actually becoming smaller to be able to accommodate all the data.
Here is the jsfiddle code
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ["CCD Oberon Mall","CCD Gold S",
"Barista Coffee Shop Indra Nagar",
"Dominos Pizza Delhi MG Road"],
title: {
enabled: true,
margin: 15
},
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
scrollbar: {
enabled: true
},
yAxis: [{
title: {
text: 'Age Count'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}, { // Secondary yAxis
title: {
text: 'Gender Count'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
},
opposite: true
}],
legend: {
align: 'center',
//x: -100,
verticalAlign: 'top',
//y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
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',
point: {
events: {
click: function () {
console.log('this.x,y=' + this.x + "," + this.y + " category=" + this.category);
}
}
},
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
type: 'column',
name: 'Female',
data: [44,4,10,10],
stack: 'Female'
}, {
type: 'column',
name: 'Male',
data: [30,0,0,10],
stack: 'Male'
}, {
type: 'column',
name: 'Under 18',
data: [0,0,0,0],
yAxis: 1,
stack: 'Under18'
}, {
type: 'column',
name: '18 To 24',
data: [0,0,0,0],
yAxis: 1,
stack: '18To24'
}, {
type: 'column',
name: '25 To 34',
data: [54,4,10,20],
yAxis: 1,
stack: '25To34'
}, {
type: 'column',
name: 'Above 34',
data: [20,0,0,3],
yAxis: 1,
stack: 'Above34'
}]
});
You need to set min/max values, i.e
min:0,
max: 2 // 2 categories on xAxis will be displayed
http://jsfiddle.net/2K8uW/2/

ignoreHiddenSeries is not hiding values on X-axis if displayed series have null data

I"m working on a highchart similar to the following http://jsfiddle.net/7FdQR/1/
$(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) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
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: [null, 3, 7, 2, null]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
If you look at the data for John you'll see some null values for apples and bananas.
If we disable Jane and Joe series and leave only John's info we will still see all the fruit categories on the x-axis even though there are null values in John's dataset and ignoreHiddenSeries is set to true. What I want to achieve here is for the x-axis to be redrawn to only display Oranges, Pears and Grapes labels instead (no Apples and Banana labels on x-axis). Is there a way to do that in highcharts?
Thanks!
Found a solution. It might not be the best one but it works http://jsfiddle.net/Hm8T9/
I created a small script and used setExtremes() function to manually set mins and maxs for xAxis.
Also if you ever deal with < 5 categories and do not want to show all of them (like in my example), set minRange for xAxis to 1 or whatever number you need.
xAxis:
{
minRange: 1
}

Resources