Passing data dynamically to Highchart - highcharts

I have the following HighChart code. I would like to make the data & categories available through an object rather than hard coding it, so that at a later point I can dynamically get the data and assign to the object. Please let me know the necessary changes that needs to be made for this purpose. Thanks in advance.
$('#stackedChartContainer').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['IAS', 'Funding', 'Gilts', 'BuyOut']
},
yAxis: {
min: 0,
title: {
text: 'Millions'
},
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: 'Pensioners',
data: [800000000, 904080340, 961576651, 998929115]
}, {
name: 'Deferreds',
data: [700000000, 925466733, 1063478804, 1158224555]
}, {
name: 'Active',
data: [200000000, 265524863, 305739877, 333386521]
}]
});

You can use addSeries / addPoint / setData functions which allows to modify data / series. Categories can be modified by setCategories() function. All of them are documented here: http://api.highcharts.com/highcharts
In case when you would like to dynamically get data i.e from server/database etc, you can use ajax calling.
Example of it are avaiable here: http://docs.highcharts.com/#preprocessing

Related

How can I move the datalabel in top right in variable pie chart

How can I move the below datalabel football in the top right of the variable pie chart instead of showing in bottom. I tried these options
alignTo: 'connectors' or alignTo: 'toPlotEdges'
But nothing worked for me. Any help will be appreciated
var total = 80;
Highcharts.chart('container', {
chart: {
type: 'variablepie',
height: 370,
marginBottom: 50
},
credits: {
enabled: false
},
title: {
text: 'Football vs cricket',
align: 'center',
y: -5,
verticalAlign: 'bottom',
style: {
fontFamily: 'proxima_nova_bold',
fontSize: '20px',
fontWeight: 'normal',
color: '#8d99ab',
}
},
subtitle: {
text: ' ' + total + '<br/> Total',
useHTML: true,
verticalAlign: 'middle',
y: -20
},
xAxis: {
labels: {
rotation: 0
}
},
plotOptions: {
variablepie: {
size: 220,
dataLabels: {
enabled: true,
connectorColor: '#979797',
useHTML: true,
formatter: function () {
var key;
if(this.key == 'football'){
key = 'as football / Lionel Messi';
}else if(this.key == 'cricket'){
key = 'as cricket / Sachin Tendulkar';
}else{
key = this.key;
}
return '<span class=cls1>' + this.y + '</span>' + '<span class=cls2>' + key + '</span>';
}
},
showInLegend: true,
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
legend: {
enabled: false
},
series: [{
minPointSize: 10,
innerSize: '70%',
zMin: 0,
data: [{name: "football", y: 71, z: 30}, {name: "cricket", y: 2, z: 18}]
}]
});
https://jsfiddle.net/anikettiwari/Lr3zy8qc/2/
You can try to implement one of the options showed here: https://www.highcharts.com/docs/advanced-chart-features/pie-datalabels-alignment
Or use the render callback and set the y position of this particular label manually.
Demo: https://jsfiddle.net/BlackLabel/2oskhmnd/
events: {
render() {
let chart = this;
chart.series[0].points[0].dataLabel.attr({y: 10});
chart.series[0].points[0].connector.hide();
}
}
Unfortunately, this solution requires to render the custom connector to moved dataLabel. You can do it by using some of the methods shown in the above link (pie-datalabels-alignment) or by using SVGRenderer tool to render a path: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
API: https://api.highcharts.com/highcharts/chart.events.render

How to move tooltip position in Highchart?

I am using highcharts.js to build horizontal bar chart. Its working correctly but by default tooltip appears horizontally so I want tooltip position to be vertical instead of horizontal.
Is it possible to achieve that? Any help appreciated!
JSFiddle - Example
Sample Code:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Stacked bar 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: {
series: {
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]
}]
});
});
});
Expected Output:
I am able to fix this issue using Tooltip.positioner as following -
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
},
positioner: function(labelWidth, labelHeight, point) {
var tooltipX = point.plotX + 20;
var tooltipY = point.plotY - 30;
return {
x: tooltipX,
y: tooltipY
};
}
},

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.

How draw a stacked column chart with type datetime

Whats the reason for the following chart don't render dates on the xAxis:
http://jsfiddle.net/NwkAr/
This are the settings:
{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [10000, 20000, 30000, 40000],
type: 'datetime'
},
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]
}]
}
Remove categories, you can't use categories and datetime axis in the same time.

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/

Resources