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

by

Scrollable Chart

You’re pretty much on the right track. If you add another wrapper and the y axis you are done.

Preview

enter image description here

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">
        <canvas id="myChart" height="300" width="1200"></canvas>
    </div>
    <canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

Script

...

new Chart(ctx).Line(data, {
    onAnimationComplete: function () {
        var sourceCanvas = this.chart.ctx.canvas;
        // the -5 is so that we don't copy the edges of the line
        var copyWidth = this.scale.xScalePaddingLeft - 5;
        // the +5 is so that the bottommost y axis label is not clipped off
        // we could factor this in using measureText if we wanted to be generic
        var copyHeight = this.scale.endPoint + 5;
        var targetCtx = document.getElementById("myChartAxis").getContext("2d");
        targetCtx.canvas.width = copyWidth;
        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
    }
});

Fiddle – http://jsfiddle.net/mbhavfwm/

More Related Contents:

  1. FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory in Ionic 3
  2. How to display data values on Chart.js
  3. firebase.database is not a function
  4. How to add text inside the doughnut chart using Chart.js?
  5. Template does not update when using ui-router and ion-tabs
  6. Leaflet- marker click event works fine but methods of the class are undefined in the callback function
  7. Chart.js — drawing an arbitrary vertical line
  8. ion-content and ion-footer have different $scope
  9. Click events on Pie Charts in Chart.js
  10. Destroy chart.js bar graph to redraw other graph in same
  11. Chart.js – draw horizontal line
  12. How to put rounded corners on a Chart.js Bar chart
  13. How to clear a chart from a canvas so that hover events cannot be triggered?
  14. Different color for each bar in a bar chart; ChartJS
  15. How to set ChartJS Y axis title?
  16. Remove x-axis label/text in chart.js
  17. How to create rounded bars for Bar Chart.js v2?
  18. Using environment variables / parameterizing config.xml
  19. Chart.js v2: How to make tooltips always appear on pie chart?
  20. chart.js load totally new data
  21. Chartjs Bar Chart showing old data when hovering
  22. Custom Legend with ChartJS v2.0
  23. How to change colours for Angular-Chart.js
  24. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  25. ng2-charts update labels and data
  26. Horizontal stacked bar chart with chart.js
  27. Chart JS custom tooltip option?
  28. Chart.js Line, different fill color for negative point
  29. What is the difference between $ionicView.enter and cache:false
  30. How do I put this on Real-Time? I already put (async: True) but it doesnt work

Leave a Comment