How to Create a Horizontal Scrolling Chart.js Line Chart with a Locked Y Axis ?

Last Updated : 13 Jan, 2024

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>