I am building this application in angular5.
The sample code is shown below. The data consists of a time/category (string) and an integer value.
When I use integer values instead of a string in place of category, it is working fine. But it should work for daily/weekly/monthly/quarterly/yearly.
var data1 =[["Q2-15", 40.4],
["Q3-15", 40.7],
["Q4-15", 40.5],
["Q1-16", 41.4],
["Q2-16", 41.4],
["Q3-16", 41.4],
["Q4-16", 40.8],
["Q1-17", 41],
["Q2-17", 41.4],
["Q3-17", 41.2],
["Q4-17", 42],
["Q1-18", 42.9],
["Q2-18", 42.9],
["Q3-18", 42.9],
["Q4-18", 42.9],
["Q1-19", 42.3],
["Q2-19", 44.7],
["Q3-19", 45.5],
["Q4-19", 14.6],
["Q1-20", 36.6]],
data2=[["Q1-20", 36.6],
["Q2-20", 83.2],
["Q3-20", 55.3]],
data3 = [
["Q4-19", 149.6, 149.6],
["Q1-20", 19.9, 52.4],
["Q2-20", 67.4, 100.02],
["Q3-20", 39.5, 72.13]
],
data4 = [
["Q4-19", 14.6, 14.6],
["Q1-20", 24.4, 47.8],
["Q2-20", 72.06, 94.4],
["Q3-20", 44.17, 67.5]
];
Highcharts.chart('container', {
title: {
text: "Forecast Chart"
},
xAxis: {
type: 'category'
},
yAxis: {
title: null,
},
series: [{
name: "data1",
data: data1,
type: 'spline',
color: Highcharts.getOptions().colors[0],
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
},
{
name: "data2",
data: data2,
type: 'spline',
color: "#4781c1",
zIndex: 1,
marker: {
fillColor: 'white',
symbol: 'circle',
lineWidth: 2,
lineColor: "#4781c1"
}
},
{
name: "data3",
data: data3,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: '#7cbaff',
marker: {
enabled: false
}
},
{
name: "data4",
data: data4,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: '#b8d8fb',
marker: {
enabled: false
}
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
},
exporting: {
buttons: {
contextButton: {
symbol: 'download',
symbolStroke: "",
symbolStrokeWidth: 5,
menuItems: ["viewFullscreen", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadXLS", "viewData"]
}
}
},
navigation: {
menuItemHoverStyle: {
background: '#f1f1f1',
color: 'black'
}
}
});
Sample Chart
Chart-Table View
