JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
"zoomEndabled": true,
"title": {
"text": "REFERENCE - 48 Hours",
"fontFamily": "IBM Plex Sans, sans-serif",
"fontColor": "rgb(144,144,144)"
},
"colorSet": "customSet",
"toolTip": {
"enabled": true,
"animationEnabled": true,
"backgroundColor": "rgba(20,20,20,.8)",
"borderThickness": "2",
"fontColor": "white",
"content": "Date:<strong>{x}</strong><br/>{name}:<strong>{y}</strong>"
},
"backgroundColor": "rgba(12,17,25,.7)",
"axisY": [
{
"suffix": "ppb",
"titleFontSize": 12,
"labelFontSize": 12,
"labelFontFamily": "IBM Plex Sans, sans-serif",
"tickColor": "rgba(4,150,225,.7)",
"gridColor": "rgba(4,150,225,.1)",
"lineColor": "rgba(4,150,225,.7)",
"titleFontColor": "#FFFFFF",
"labelFontColor": "#FFFFFF",
"includeZero": false
}
],
"axisY2": [],
"axisX": {
"gridThickness": 1,
"titleFontSize": 12,
"labelFontSize": 12,
"labelFontFamily": "IBM Plex Sans, sans-serif",
"tickColor": "rgba(4, 150, 255, .7)",
"gridColor": "rgba(4, 150, 255, .1)",
"lineColor": "rgba(4, 150, 255, .7)",
"titleFontColor": "white",
"labelFontColor": "white"
},
"data": [
{
"type": "line",
"markerType": "none",
"name": "Ozone - Low Conc.",
"axisYType": "primary",
"showInLegend": false,
"axisYIndex": 0,
"lineThickness": 1,
"xValueType": "dateTime",
"xValueFormatString": "DD/MM/YYYY HH:mm",
"yValueFormatString": "######.######",
"dataPoints": [
{
"x": 1601408400000,
"y": -0.109
},
{
"x": 1601409000000,
"y": -0.109
},
{
"x": 1601409600000,
"y": -0.109
},
{
"x": 1601410200000,
"y": -0.109
},
{
"x": 1601410800000,
"y": -0.109
},
{
...