We will learn how to create a horizontal scrolling Chart.js line chart with a locked y-axis using the ChartJS CDN library.
Approach
-
In the HTML template, use two <canvas> tags: one to show the y-axis which should be locked in place, and the other to show the line chart itself.
- Create one <div> tag to wrap the first <canvas> tag (the locked y-axis), which will act as the smaller of two columns since it is just a y-axis.
- Create two <div> tags to wrap the second <canvas> tag (the line chart), one to contain the chart to enable the scroll, and the other to wrap this <div> tag which will act as the larger column of two columns, since it is showing the line graph itself.
- Create a <div> tag to wrap all the aforementioned <divs> such that we can apply the flex property to make them adjacent to each other.
- In the script section of the code, instantiate both ChartJS objects by setting the type, data, and options properties of the library.
- Set other required options inside each property like datasets, label, borderColor, fill, scales, and others.
- In ChartJS, we can use a special function afterFit(), which simply increases the padding of whatever axis the property is defined on. In this case, since the y-axis has to be locked, we will use this function to append a value that best suits the y-axis of the first <canvas>, such that it directly coincides with the second <canvas> tag and acts as a y-axis for that line chart.
- Since only the y-axis is required for the first <canvas>, we can remove all other properties such as the x-axis and its corresponding properties, no legend, no label for the dataset, etc.
- Remember to set the maintainAspectRatio under the options property of both <canvas> tags to false to set the dimensions of the y-axis and the line chart equal to the <div> tags they are wrapped inside of.
CDN Link:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Syntax:
scales: {
x: {
ticks: {
display: false
},
gridLines: {
display: false
}
},
y: {
afterFit: (c) => {
c.width = 40;
}
}
}
}
});
Example: The following code shows a simple example of a line chart showcasing a sample dataset with a list of programming languages on the x-axis and a number dataset on the y-axis, and the y-axis is locked in place with horizontal scrolling enabled if the dataset is too large.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
height: 90vh;
background-color: rgb(239, 237, 237);
display: flex;
justify-content: center;
align-items: center;
}
.chart-container {
width: 700px;
display: flex;
}
.small-column {
width: 40px;
}
.large-column {
max-width: 700px;
overflow-x: scroll;
}
.container {
width: calc(1000px - 40px);
height: 500px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="chart-box">
<div class="chart-container">
<div class="small-column">
<canvas id="mySecondChart"></canvas>
</div>
<div class="large-column">
<div class="container">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
<script src=
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Python', 'JavaScript', 'C++', 'C', 'Java', 'PHP'],
datasets: [{
label: 'Percentage (%)',
data: [49, 63, 22, 19, 30, 19],
borderColor: 'green',
fill: false,
}]
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
top: 11
}
},
plugins: {
legend: {
display: false
}
},
scales: {
y: {
ticks: {
display: false
},
border: {
display: false
}
}
}
}
});
const ctx2 = document.getElementById('mySecondChart');
new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
data: [49, 63, 22, 19, 30, 19],
fill: false,
}]
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
bottom: 36
}
},
plugins: {
legend: {
display: false
}
},
scales: {
x: {
ticks: {
display: false
},
gridLines: {
display: false
}
},
y: {
afterFit: (c) => {
c.width = 40;
}
}
}
}
});
</script>
</body>
</html>
|
Output: