JavaScript
var dataPoints = [
{ x: new Date(2023, 0, 1), y: 10 },
{ x: new Date(2023, 1, 1), y: 15 },
{ x: new Date(2023, 2, 1), y: 25 },
{ x: new Date(2023, 3, 1), y: 30 },
{ x: new Date(2023, 4, 1), y: 28 },
{ x: new Date(2023, 5, 1), y: 40 },
{ x: new Date(2023, 6, 1), y: 35 },
{ x: new Date(2023, 7, 1), y: 50 },
{ x: new Date(2023, 8, 1), y: 45 },
{ x: new Date(2023, 9, 1), y: 55 },
{ x: new Date(2023, 10, 1), y: 60 },
{ x: new Date(2023, 11, 1), y: 65 },
];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
axisX: {
valueFormatString: "MMM YYYY",
labelFormatter: function() {
return ""; //hide all default labels
},
tickThickness: 0,
stripLines: []
},
axisY: {
title: "Values"
},
data: [{
type: "line",
xValueType: "dateTime",
dataPoints: dataPoints
}]
});
chart.render();
addStriplinesDynamic(chart);
function addStriplinesDynamic(chart) {
var xAxis = chart.axisX[0];
var startDate = xAxis.get("viewportMinimum") || dataPoints[0].x;
var endDate = xAxis.get("viewportMaximum") || dataPoints[dataPoints.length-1].x;
var startYear = (new Date(startDate)).getFullYear();
var endYear = (new Date(endDate)).getFullYear();
var months = [2, 5, 8, 11]; // March, June, Sep, Dec
var stripLines = [];
for (var y = startYear; y <= endYear; y++) {
months.forEach(function(m) {
var striplineDate = new Date(y, m, 1);
if (striplineDate >= startDate && striplineDate <= endDate) {
stripLines.push({
value: striplineDate,
color: "transparent",
label: striplineDate.toLocaleString('default', { month: 'short', year: 'numeric' }),
labelPlacement: "outside",
labelBackgroundColor: chart.axisX[0].get("labelBackgroundColor"),
labelFontColor:...