Ok
This is my code, below, for some reason, I can not get it working on Fiddle, so it might take a little time to send you the link, but in the meantime if you do notice anything please do let me know.
Code: Select all
let myChart = HighCharts.stockChart('highcharts', {
credits: {
enabled: false
},
legend: {
enabled: true,
layout: 'horizontal',
verticalAlign: 'bottom',
floating: false,
symbolWidth: 30,
symbolHeight: 30,
itemStyle: {
fontSize: '20px',
color: "white",
}
},
chart: {
type: 'line',
animation: false,
backgroundColor: '#464340',
zoomType: 'x'
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
title: {
text: this.plot_title,
style: { "color": "#ECEAF9", "fontSize": "12px" }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
},
title: {
text: 'Date',
style: { "color": "#ECEAF9", "fontSize": "12px" }
},
labels: {
style: { "color": "#ECEAF9", "fontSize": "12px" }
}
},
yAxis: {
opposite: false,
title: {
text: this.plot_yaxis,
style: { "color": "#ECEAF9", "fontSize": "12px" }
},
labels: {
formatter: function () {
return (this.value.toFixed(2) ? '' : '') + this.value.toFixed(2);
},
style: { "color": "#ECEAF9", "fontSize": "14px" }
},
},
series: [
{
boostThreshold: 1,
color: '#FCB711',
name: this.series_title_a,
type: 'spline',
data: this.datasets[0].data,
showInNavigator: true,
lineWidth: 3
},
{
boostThreshold: 1,
color: '#0089D0',
name: this.series_title_b,
type: 'spline',
data: this.datasets_b[0].data,
showInNavigator: true,
lineWidth: 3
},
{
boostThreshold: 1,
color: '#d00021',
name: this.series_title_c,
type: 'spline',
data: this.datasets_c[0].data,
showInNavigator: true,
lineWidth: 3
},
],
"tooltip": {
"pointFormat": "<b>{point.y:.2f}</b>",
"shared": true
}
});