JavaScript
new CanvasJS.Chart("avg_ppm", {
animationEnabled: false,
exportEnabled: true,
theme: "light2",
title: { text: "24-hour cumulative ppm rate" },
axisX: {
title: "Date",
labelAngle: -45,
// intervalType: "day",
minimum: new Date(2026, 0, 4, 12, 0, 0),
valueFormatString: "DD/MM/YY",
intervalType: "day",
stripLines: [{
value: new Date(2026, 0, 5, 12, 0, 0),
labelPlacement: "outside",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
},
{
value: new Date(2026, 0, 6, 12, 0, 0),
labelPlacement: "outside",
label: "12PM",
labelFontColor: "grey",
labelBackgroundColor: "transparent",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
},{
value: new Date(2026, 0, 7, 12, 0, 0),
labelPlacement: "outside",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
}, {
value: new Date(2026, 0, 8, 12, 0, 0),
labelPlacement: "outside",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
}, {
value: new Date(2026, 0, 9, 12, 0, 0),
labelPlacement: "outside",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
}, {
value: new Date(2026, 0, 10, 12, 0, 0),
labelPlacement: "outside",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
}, {
value: new Date(2026, 0, 11, 12, 0, 0),
labelPlacement: "outside",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
}, {
value: new Date(2026, 0, 12, 12, 0, 0),
labelPlacement: "outside",
thickness: 0,
tickThickness: 1,
tickColor: "grey"
}],
crosshair: {
enabled: true,
},
},
axisY: {
title: "Cumulative PPM/24h Rate",
maximum: 10,
includeZero: true,
crosshair: {
enabled: true,
},
stripLines: [
{
value: 2,
color: "red",
opacity: 0.4,
thickness: 2,
label: "Max",
labelFontColor: "rgba(255,0,0,0.4)",
...