In today's data-driven world, businesses and analysts often need to compare daily performance metrics across years to uncover trends, evaluate growth, or identify anomalies. Whether you're tracking sales, website traffic, or environmental data, a well-crafted chart can make these insights accessible and actionable. This blog walks through creating a comparison chart using CanvasJS to display daily data for a specific month (e.g., March) across two years (2024 and 2025). We'll use xValue for accurate date-time storage, label for clean day displays, and a custom contentFormatter to enhance tooltips with dates and percentage changes, making the chart both functional and user-friendly.
Setting Up CanvasJS
Start by adding CanvasJS to your project via its CDN for a quick setup. Create an HTML file with a chart container
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Data Comparison Chart</title>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<script>
// JavaScript code will go here
</script>
</body>
</html>
Preparing Your Data
In practice, you'd likely pull data from a database, API, or CSV—say, daily sales from a retail system or website hits from analytics. Here, we'll simulate daily sales for March 2024 and 2025 to keep things grounded. Each data point starts with an x (JavaScript Date object) and y (the metric), then gets mapped to include a label (day of the month) and xValue (full date for tooltips).
var march2024Dps = [
{ "x": new Date(2024, 2, 1), "y": 1177 },
{ "x": new Date(2024, 2, 2), "y": 1192 },
{ "x": new Date(2024, 2, 3), "y": 1042 }
.
{ "x": new Date(2024, 2, 31), "y": 1106 }
];
var march2025Dps =[
{ "x": new Date(2025, 2, 1), "y": 1123 },
{ "x": new Date(2025, 2, 2), "y": 959 },
{ "x": new Date(2025, 2, 3), "y": 1032 },
.
{ "x": new Date(2025, 2, 31), "y": 1209 }
];
// Transform data for chart
march2024Dps = march2024Dps.map(dp => ({
label: CanvasJS.formatDate(dp.x, "D"), // Day (1-31)
y: dp.y,
xValue: dp.x
}));
march2025Dps = march2025Dps.map(dp => ({
label: CanvasJS.formatDate(dp.x, "D"),
y: dp.y,
xValue: dp.x
}));
Building the Chart
To visualize daily sales trends for March 2024 and 2025, we'll build a spline chart with CanvasJS, ideal for tracking changes over time with smooth, continuous lines. The chart displays days (1-31) on the primary x-axis for 2025, while 2024 uses a hidden secondary x-axis to handle differing label and x values, ensuring alignment without visual clutter. A custom contentFormatter enriches tooltips with full dates (DD MMMM), sales values, and year-over-year percentage changes, color-coded green for increases and red for decreases. This setup, paired with two data series formatted with label and xValue, ensures a clear, interactive comparison that highlights trends and differences effectively.
...
axisX2: {
lineThickness: 0,
labelFormatter: () => "",
tickLength: 0,
margin: 0
},
data: [{
type: "spline",
name: "2025",
showInLegend: true,
color: "#343A40",
dataPoints: march2025Dps
},{
type: "spline",
name: "2024",
showInLegend: true,
lineDashType: "longDash",
axisXType: "secondary",
color: "#17A2B8",
dataPoints: march2024Dps
}]
...
See It in Action
To better understand how everything ties together, explore the live demo below. The chart is fully interactive—hover over the lines to compare daily values between 2024 and 2025, view percentage changes, and see how the tooltip formatting enhances readability.
Conclusion
CanvasJS makes it easy to craft an interactive chart for year-over-year daily data, perfect for tracking sales, engagement, or other metrics. By using xValue for date precision, label for a clean axis, a hidden secondary x-axis for data alignment, and a custom contentFormatter for rich tooltips, this chart is both practical and powerful. Its flexibility lets you scale to more months or datasets, making it a go-to for data-driven decisions.
