How to Create a Horizontal Scrolling Chart.Js Line Chart With a Locked Y Axis

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

Chart.js 2.7.2: https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/

This approach handles different DPR settings and will scale the axis to match the scaling that Chart.js applies to its charts. It also calls .clearRect() on the original Y axis that Chart.js draws, clearing the pixels in the defined area which means that there is no duplication of axes or overlaps.

CSS:

.chartWrapper {
 position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: 600px;
  overflow-x: scroll;
}

HTML

<div class="chartWrapper">
    <div class="chartAreaWrapper">
        <div class="chartAreaWrapper2">
          <canvas id="chart-Test" height="300" width="1200"></canvas>
        </div>
     </div>
     <canvas id="axis-Test" height="300" width="0"></canvas>
</div>

JS:

    $(function () {
    var rectangleSet = false;

    var canvasTest = $('#chart-Test');
    var chartTest = new Chart(canvasTest, {
        type: 'bar',
        data: chartData,
        maintainAspectRatio: false,
        responsive: true,
        options: {
            tooltips: {
                titleFontSize: 0,
                titleMarginBottom: 0,
                bodyFontSize: 12
            },
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    ticks: {
                        fontSize: 12,
                        display: false
                    }
                }],
                yAxes: [{
                    ticks: {
                        fontSize: 12,
                        beginAtZero: true
                    }
                }]
            },
            animation: {
                onComplete: function () {
                    if (!rectangleSet) {
                        var scale = window.devicePixelRatio;                       

                        var sourceCanvas = chartTest.chart.canvas;
                        var copyWidth = chartTest.scales['y-axis-0'].width - 10;
                        var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;

                        var targetCtx = document.getElementById("axis-Test").getContext("2d");

                        targetCtx.scale(scale, scale);
                        targetCtx.canvas.width = copyWidth * scale;
                        targetCtx.canvas.height = copyHeight * scale;

                        targetCtx.canvas.style.width = `${copyWidth}px`;
                        targetCtx.canvas.style.height = `${copyHeight}px`;
                        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale);

                        var sourceCtx = sourceCanvas.getContext('2d');

                        // Normalize coordinate system to use css pixels.

                        sourceCtx.clearRect(0, 0, copyWidth * scale, copyHeight * scale);
                        rectangleSet = true;
                    }
                },
                onProgress: function () {
                    if (rectangleSet === true) {
                        var copyWidth = chartTest.scales['y-axis-0'].width;
                        var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;

                        var sourceCtx = chartTest.chart.canvas.getContext('2d');
                        sourceCtx.clearRect(0, 0, copyWidth, copyHeight);
                    }
                }
            }
        }
    });

Chart.js 2.7.0 How to add Horizontal scrollbar dynamically, and then remove it

For people that want to know:

• how to add scrolling and scroll horizontally a chart.js chart
• and to have it dynamically appear at a certain bar width (in this instance), otherwise there is no scrolling (it fits to window).
• and to have the scrolling with a y-axis that doesn't disappear the second you start scrolling (a locked y-axis).
• and to have text centered in your bar
• and this text flips vertically when the bar reaches a certain width

well ... here's some code to look at!

<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="chartWrapper" style="height: 100%; width: 100%;">
   <div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden;">
      <div id="canvas-holder" style="height: 100%; width: 100%;" oncontextmenu="return false;">
      <canvas id="myChart" style="background-Color: white"></canvas>
      </div>
   </div>
   <canvas id="myChartAxis" style="position: absolute; top: 0; left: 0; pointer-events: none; height: 100%; width: 0px; background-Color: white"></canvas>
</div>
</body>

http://jsfiddle.net/jmpxgufu/159/

(one caveat: I'm not sure why, but when I posted my code that was working with the chart.js libraries that I linked to locally while developing, and I tested locally, was giving me all types of errors when put into jsfiddle. So this code was quickly modified to work -- so it's probably not perfect, but will give you ideas)

Chart.js making this chart more readable / scrollable

Chart.js doesn't support scrollable axis natively. ChartJs charts are responsive and change width according to parent container. You can do something like this :

<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <canvas id="chart" height="400" width="15000"></canvas>
  </div>
</div>

CSS

.chartWrapper {
  position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: 15000px;
  overflow-x: scroll;
}

Finally, add this options object to your chart

options: {     
  scales: { 
  xAxes: [{   
    ticks: {
      padding: 20
    }
  }]
}} 

Here is one more example on how you can make your chart scrollable

Chart.js V2. bar chart with a fixed y-axis

You just need to modify the existing code mentioned in the fiddle with following code. This might help you work with v2.

animation: {
    onComplete: function(data) {
        var getParentIdName = this.chart.canvas.attributes.id.value,
        targetElement = document.getElementById("virtual-chart-axis"),
        sourceElement = document.getElementById("organizational-view"),
        sourceCanvas = this.chart.ctx.canvas,
        copyWidth = this.scales["y-axis-0"].width, // we are copying the width of actual chart
        copyHeight = this.chart.height, // we are copying the width of actual chart
        targetElementWidth = sourceElement.getContext("2d").canvas.clientWidth,
        targetElementHeight = sourceElement.getContext("2d").canvas.clientHeight,
        targetCtx = targetElement.getContext("2d");

        targetCtx.canvas.width = copyWidth;
        targetCtx.canvas.height = copyHeight;
        targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight);
    }
}

Good Luck.

---

Related Topics