How to Create a Horizontal Scrolling Chart.js Line Chart with a Locked Y Axis ?
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 = "https://cdn.jsdelivr.net/npm/chart.js" ></ script > < 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:
Contact Us