How can I create a horizontal scrolling Chart.js line chart with a locked y axis?

Question

I\'d like to create a line chart with Chart.Js but have the Y-Axis not move when I scroll.

I\'m assuming I can use a fixed width, and put i

Answer 1

Chart.js 2.x:

CSS:

    .graph {
        padding: 10px;
        position: relative;
        overflow-x: scroll;
        width: 100%;
        .graph-container {
            height: 500px;
            width: 100%;
            min-width: 100%
        }
    }

HTML : Ignore the angular ngFor

JS

Set these options:

        options: {
            responsive: true,
            maintainAspectRatio: false
        }

Set the width of the "graph-container"

I'm setting the width based on the number of elements I have X a zoom that the user chooses

graphCanvasElement.nativeElement.parentElement
    .setAttribute('style', `width: ${chartData.data.labels.length*graph.zoom}px;min-width: 100%`);

graph.chartObj = new Chart(graphCanvasElement.nativeElement.getContext('2d'), chartData);