How to plot line chart with series data in highcharts? - javascript

I am trying to create a line chart with Highcharts along with navigation control, but in my example I can only see points. Please help
My chart options
$('#container').highcharts('StockChart', {
chart: {
defaultSeriesType: 'line'
},
rangeSelector: {
selected: 1
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: true
},
dataLabels: {
enabled: true,
borderRadius: 5,
borderWidth: 1,
y: -6,
formatter: function () {
return this.series.name;
}
},
states: {
hover: {
lineWidth: 10
}
}
},
series: {
cursor: 'pointer'
}
},
tooltip: {
shared: false,
formatter: function () {
var str = '';
str += 'Task: ' + this.series.name + '<br>';
str += 'Start Time: ' + this.point.start_time + '<br>';
str += 'End Time: ' + this.point.end_time + '<br>';
str += 'Throughput: ' + this.point.y + '<br>';
return str;
}
},
series: series
});
Update
Jsfiddle link


The problem is that you are actual creating a new series for each datapoint. So currently you effectively have 4 lines, with a single point on each line. Hence why you don't see any lines (as lines need 2 or more points).
What you need to do is create a single series with multiple data points. Something like this:
var series = [{
"name": "Territory_Out",
"data": [{
"x": 1147651200000,
"y": 33.1,
"start_time": "14-05-2006 00:00:00",
"end_time": "15-05-2006 00:00:00"
}, {
"x": 1147737600000,
"y": 450,
"start_time": "15-05-2006 00:00:00",
"end_time": "16-05-2006 00:00:00"
}, {
"x": 1147737600000,
"y": 400,
"start_time": "15-05-2006 00:00:00",
"end_time": "16-05-2006 00:00:00"
}, {
"x": 1147824000000,
"y": 77.67,
"start_time": "16-05-2006 00:00:00",
"end_time": "17-05-2006 00:00:00"
}]
}];

Related

Create Highcharts heatmaps using JSON data

I have JSON data and want to create a highcharts heatmap out of it. I am not sure how to format the JSON data in the required format.
My JSON data:
let json = [
{
"metric": 4940616.0,
"title": "d_revenue",
"date": "2020-01-01"
},
{
"metric": 5132162.0,
"title": "p_revenue",
"date": "2020-02-01"
},
{
"metric": 4954576.0,
"title": "s_revenue",
"date": "2020-03-01"
},
{
"metric": 4882217.0,
"title": "d_revenue",
"date": "2020-01-01"
},
{
"metric": 4869609.0,
"title": "t_revenue",
"date": "2020-03-01"
},
{
"metric": 5075422.0,
"title": "p_revenue",
"date": "2020-04-01"
},
{
"metric": 4461996.0,
"title": "v_revenue",
"date": "2020-01-01"
}
]
I need date on the xaxis and metric on the yaxis.
I did this to create the categories for xaxis and yaxis:
var x_cats = [],
y_cats=[],
heat_data=[];
json.forEach(d=>{
x_cats.push(d.date);
y_cats.push(d.title);
});
var x_axis = [...new Set(x_cats)];
var y_axis = [...new Set(y_cats)];
I am not sure how to create the data which should be in a format like [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ] (not from JSON data, explaining format).
I am not sure how to create that out of the JSON data I have above.
This is my Highcharts code:
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: x_axis
},
yAxis: {
categories: y_axis,
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: FORMATTED_DATA,
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
Not sure what to put in place of FORMATTED_DATA.

Highcharts zoom on 2 charts - Reset zoom issue

I have been able to get dual zoom working on my 2 historian charts:
http://jsfiddle.net/StephenRichardson/s8k5drbp/
The only issue I have is that when you zoom on chart1, and then zoom on chart2, you get 2 "Reset Zoom" buttons. Clicking Reset Zoom on one of the charts works but doesn't hide the other button. I have tried setting display none at the end of the setextremes method but it seems to break the selection mechanism.
Any ideas?
$(function() {
var chartChartColumnRangeRate;
var chartChartHistorian;
$(document).ready(function() {
function unzoom() {
chartChartColumnRangeRate.options.chart.isZoomed = false;
chartChartColumnRangeRate.yAxis[0].setExtremes(null, null);
chartChartColumnRangeRate.yAxis[0].isDirty = true;
chartChartHistorian.options.chart.isZoomed = false;
chartChartHistorian.xAxis[0].setExtremes(null, null);
chartChartHistorian.xAxis[0].isDirty = true;
}
chartChartColumnRangeRate = Highcharts.chart('ChartColumnRangeRate', {
chart: {
type: 'columnrange',
height: 120,
inverted: true,
zoomType: 'y'
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1517374800000,
min: 1517288400000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: true
},
title: {
text: null,
},
type: 'datetime',
events: {
afterSetExtremes: function() {
if (!this.chart.options.chart.isZoomed) {
var min = this.chart.yAxis[0].min;
var max = this.chart.yAxis[0].max;
chartChartColumnRangeRate.yAxis[0].isDirty = true;
chartChartHistorian.xAxis[0].isDirty = true;
chartChartHistorian.xAxis[0].setExtremes(min, max, true);
chartChartHistorian.options.chart.isZoomed = false;
}
}
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: false
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function(e) {
if (e.point.series.options.clickable)
location.href = '../../events/eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
var tooltip = '<b>' + this.series.name + '</b>';
if (this.series.name != 'Running' && this.series.name != 'Future') {
tooltip += '<br/>' + Highcharts.dateFormat('%b %d %Y %H:%M', this.point.low) + ' - ' + Highcharts.dateFormat('%b %d %Y %H:%M', this.point.high);
}
return tooltip;
}
},
legend: {
enabled: true,
useHTML: true,
labelFormatter: function() {
return this.userOptions.id
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Packing No Product',
id: 'Performance Loss',
color: '#fde54a',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
data: [{
"id": 55923,
"low": 1517326575000,
"high": 1517326614000
}]
}, {
name: 'Packing No Product',
id: 'Availability Loss',
color: '#d9534f',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
data: [{
"id": 55902,
"low": 1517325959000,
"high": 1517326157000
}]
}, {
name: 'Packing No Product',
id: 'Performance Loss',
color: '#fde54a',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
linkedTo: 'Performance Loss',
data: [{
"id": 55888,
"low": 1517323956000,
"high": 1517323968000
}]
}, {
name: 'Packing No Product',
id: 'Performance Loss',
color: '#fde54a',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
linkedTo: 'Performance Loss',
data: [{
"id": 55859,
"low": 1517322584000,
"high": 1517322603000
}]
}, {
name: 'Packing No Product',
id: 'Availability Loss',
color: '#d9534f',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
linkedTo: 'Availability Loss',
data: [{
"id": 55844,
"low": 1517322306000,
"high": 1517322513000
}]
}, {
name: 'Packing No Product',
id: 'Performance Loss',
color: '#fde54a',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
linkedTo: 'Performance Loss',
data: [{
"id": 55834,
"low": 1517322159000,
"high": 1517322193000
}]
}, {
name: 'Packing No Product',
id: 'Availability Loss',
color: '#d9534f',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
linkedTo: 'Availability Loss',
data: [{
"id": 55815,
"low": 1517321389000,
"high": 1517321863000
}]
}, {
name: 'Packing No Product',
id: 'Performance Loss',
color: '#fde54a',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
linkedTo: 'Performance Loss',
data: [{
"id": 55813,
"low": 1517321352000,
"high": 1517321359000
}]
}, {
name: 'Packing Not In Use',
id: 'Availability Loss',
color: '#d9534f',
clickable: true,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 2,
linkedTo: 'Availability Loss',
data: [{
"id": 55803,
"low": 1517320594000,
"high": 1517321352000
}]
}, {
name: 'Running',
id: 'Running',
color: '#6cc14c',
clickable: false,
groupPadding: 0.5,
pointWidth: 120,
zIndex: 0,
data: [{
low: 1517288400000,
high: 1517374800000
}]
}]
});
chartChartHistorian = Highcharts.chart('ChartHistorian', {
chart: {
type: 'line',
height: 400,
zoomType: 'x'
},
title: {
text: null
},
xAxis: {
type: 'datetime',
title: {
text: null
},
max: 1517374800000,
min: 1517288400000,
events: {
afterSetExtremes: function() {
if (!this.chart.options.chart.isZoomed) {
var min = this.chart.xAxis[0].min;
var max = this.chart.xAxis[0].max;
chartChartHistorian.xAxis[0].isDirty = true;
chartChartColumnRangeRate.yAxis[0].isDirty = true;
chartChartColumnRangeRate.yAxis[0].setExtremes(min, max, true);
chartChartColumnRangeRate.options.chart.isZoomed = false;
}
}
}
},
yAxis: {
title: {
text: null
},
min: 0
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
"name": "Rate",
"tooltip": {
"valueSuffix": " Products/min"
},
"turboThreshold": 0,
"data": [{
"x": 1517288400127,
"y": 700.0
}, {
"x": 1517288415127,
"y": 700.0
}, {
"x": 1517288430127,
"y": 0.0
}, {
"x": 1517288445127,
"y": 0.0
}, {
"x": 1517288460127,
"y": 0.0
}, {
"x": 1517288475127,
"y": 0.0
}, {
"x": 1517288490127,
"y": 100.0
}, {
"x": 1517288505127,
"y": 100.0
}, {
"x": 1517288520127,
"y": 100.0
}, {
"x": 1517288535127,
"y": 100.0
}, {
"x": 1517288550127,
"y": 1303.0
}, {
"x": 1517288565127,
"y": 1303.0
}, {
"x": 1517288580127,
"y": 1303.0
}, {
"x": 1517288595127,
"y": 1303.0
}, {
"x": 1517288610127,
"y": 900.0
}, {
"x": 1517288625127,
"y": 900.0
}, {
"x": 1517288640127,
"y": 900.0
}, {
"x": 1517288655127,
"y": 900.0
}, {
"x": 1517288670127,
"y": 1300.0
}, {
"x": 1517288685127,
"y": 1300.0
}, {
"x": 1517288700127,
"y": 1300.0
}, {
"x": 1517288715127,
"y": 1300.0
}, {
"x": 1517288730127,
"y": 1550.0
}, {
"x": 1517288745127,
"y": 1550.0
}, {
"x": 1517288760127,
"y": 1550.0
}, {
"x": 1517288775127,
"y": 1550.0
}, {
"x": 1517288790127,
"y": 1400.0
}, {
"x": 1517288805127,
"y": 1400.0
}, {
"x": 1517288820127,
"y": 1400.0
}, {
"x": 1517288835127,
"y": 1400.0
}, {
"x": 1517288850127,
"y": 1500.0
}, {
"x": 1517288865127,
"y": 1500.0
}, {
"x": 1517288880127,
"y": 1500.0
}, {
"x": 1517288895127,
"y": 1500.0
}, {
"x": 1517288910127,
"y": 1100.0
}, {
"x": 1517288925127,
"y": 1100.0
}, {
"x": 1517288940127,
"y": 1100.0
}, {
"x": 1517288955127,
"y": 1100.0
}, {
"x": 1517288970127,
"y": 651.0
}, {
"x": 1517288985127,
"y": 651.0
}, {
"x": 1517289000127,
"y": 651.0
}, {
"x": 1517289015127,
"y": 651.0
}, {
"x": 1517289030127,
"y": 750.0
}, {
"x": 1517289045127,
"y": 750.0
}, {
"x": 1517289060127,
"y": 750.0
}, {
"x": 1517289075127,
"y": 750.0
}, {
"x": 1517289090127,
"y": 1050.0
}, {
"x": 1517289105127,
"y": 1050.0
}, {
"x": 1517289120127,
"y": 1050.0
}, {
"x": 1517289135127,
"y": 1050.0
}, {
"x": 1517289150127,
"y": 1450.0
}, {
"x": 1517326920127,
"y": 600.0
}, {
"x": 1517326935127,
"y": 600.0
}, {
"x": 1517326950127,
"y": 600.0
}]
}]
});
});
});

Call 'zoom()' on the second chart, when the reset zoom button was clicked:
events: {
selection: function(e) {
if (e.resetSelection) {
const otherChart = Highcharts.charts.find(chart => chart !== this)
otherChart.zoom()
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/jmgu6rgg/
API Reference: https://api.highcharts.com/highcharts/chart.events.selection

Formatting Chart.js Chart

Good day - I have a chart that I am displaying on my page, and it displays perfect, I just need to make two small customizations to it, and for the life of me, whenever I make a syntax change the chart no longer displays. I am wanting to
1) Remove the Percentages from the right side
2) On the line chart have the "hover value" display as a number NOT a percent
This is the syntax I currently have - how should it be edited in order to accommodate those changes?
<script>
var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Metric 1',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: val1,
yAxisID: 'y-axis-1'
}, {
label: 'Metric 2,
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: val2
}]
},
options: {
tooltips: {
callbacks: {
label: function (t, d) {
if (t.datasetIndex === 0) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return xLabel + ': ' + yLabel + '%';
} else {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}, {
id: 'y-axis-1',
position: 'right',
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value + '%';
}
}
}]
}
}
});
</script>

Remove the Percentages from the right side
remove yAxisID: 'y-axis-1' from your first dataset, along with second object from yAxes array ..
{
id: 'y-axis-1',
position: 'right',
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '%';
}
}
}
On the line chart have the "hover value" display as a number NOT a percent
replace this line of code (in tooltips label callback) :
return xLabel + ': ' + yLabel + '%';
with the following :
return xLabel + ': ' + yLabel;
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'], //labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Metric 1',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: [3, 2, 4], //val1
}, {
label: 'Metric 2',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: [50, 30, 40], //val2
}]
},
options: {
tooltips: {
callbacks: {
label: function(t, d) {
if (t.datasetIndex === 0) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
return xLabel + ': ' + yLabel;
} else {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="canvasOfTestPortion"></canvas>

Javascript Highcharts cannot get the name of the click column in the onclick event

I am trying to get the name of the column that it's clicked but I get undefined.
I can see that it shows in the tooltip but not when I click the column.
Here's the code:
$(function () {
var data = { "mains": [{ "id": "454", "name": "main 1", "subs": [{ "id": "32", "name": "sub 1" }, { "id": "23", "name": "sub 2" }, { "id": "54", "name": "sub 3" }], "image": null }, { "id": "654", "name": "main 2", "subs": [{ "id": "87", "name": "sub 1" }, { "id": "78", "name": "sub 2" }], "image": null }] };
mainlist = [],
sublist = Object.create(null);
data.mains.forEach(function (main) {
mainlist.push(main.name);
sublist[main.name] = main.subs.map(function (sub) {
return sub.name;
});
})
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Top Title Here'
},
xAxis: {
categories: mainlist
},
yAxis: {
title: {
enabled: true,
text: 'Left Title',
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert(this.name); //returns undefined
},
},
},
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'title here',
data: [5, 10]
}],
});
I have also tried this.series.name, this.x and this.y but none are giving me the name.
How can I fix this?

As the doc states the plotOptions.series.point only gets an event as parameter within its event-listeners, nevertheless they hold some info as well:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Top Title Here'
},
xAxis: {
categories: mainlist
},
yAxis: {
title: {
enabled: true,
text: 'Left Title',
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
// a click-listener gets an event as param
click: function (event) {
console.log(event.point.category); //returns "main 1" or "main 2"
console.log(event.point.plotX+'/'+event.point.plotY); //or its coords
console.log(event);// and a lot more
},
},
},
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'title here',
data: [5, 10]
}],
});

Set the "events" object inside the "column" object instead series.

highcharts with json data

I am new to these things. Using the code from URL: http://jsfiddle.net/sujay/UMeGS/ , I was trying to create a chart with my own data.
Using REST web service, I am able to get my data from database, which means when I click on the following link 'localhos:48095/WebApplication22/webresources/sample22.test15' , I am getting json data as follows
[
{
"id": 1,
"status": "stopped",
"unit": "a",
"val": 24
},
{
"id": 2,
"status": "working",
"unit": "a",
"val": 59
},
{
"id": 3,
"status": "turning",
"unit": "a",
"val": 2
},
{
"id": 5,
"status": "transport",
"unit": "a",
"val": 6
},
{
"id": 6,
"status": "stopped",
"unit": "b",
"val": 336
},
{
"id": 7,
"status": "working",
"unit": "b",
"val": 212
},
{
"id": 9,
"status": "turning",
"unit": "b",
"val": 23
},
{
"id": 10,
"status": "transport",
"unit": "b",
"val": 1
}
]
I have slightly modified code from http://jsfiddle.net/sujay/UMeGS/, in which I have used getJSON() to get data.
Below is the code.
$(function () {
$.getJSON('localhos:48095/WebApplication22/webresources/sample22.test15', function (data) {
var seriesData = [];
var xCategories = [];
var i, cat;
for (i = 0; i < data.length; i++) {
cat = 'Unit ' + data[i].unit;
if (xCategories.indexOf(cat) === -1) {
xCategories[xCategories.length] = cat;
}
}
for (i = 0; i < data.length; i++) {
if (seriesData) {
var currSeries = seriesData.filter(function (seriesObject) {
return seriesObject.name == data[i].status;
});
if (currSeries.length === 0) {
seriesData[seriesData.length] = currSeries = {
name: data[i].status,
data: []
};
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].val;
} else {
seriesData[0] = {
name: data[i].status,
data: [data[i].val]
}
}
}
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: xCategories
},
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'
}
},
series: seriesData
});
});
});
});
But I am unable to see anything. Chart is not displayed. Please help me on this thing.

Categories

Resources