[Chartjs]-ChartJS 2.6 – Bar chart fixed height scrollable-X

by

1👍

✅

It seems to have something to do with the fact you’re missing a wrapper around the canvas. Here’s an updated version of your fiddle. I’ve added a function called addData that takes the number of new entries you want to add and the chart variable. It’s not as good as it can be (because i’m not 100% sure how you want to add new data) but it’s a great starting point. The trick is to not initialize the chart with all data included, you want to create the chart and then add to it later to expand the canvas, otherwise the initial render will work to fit all of the data in at that width.

https://jsfiddle.net/qmqmg82z/3/

Additional JavaScript code:

function addData(numData, chart){
    for (var i = 0; i < numData; i++){
        chart.data.datasets[0].data.push(Math.random() * 100);
        chart.data.labels.push("Label" + i);
        var newwidth = $('.chartAreaWrapper2').width() +60;
        $('.chartAreaWrapper2').width(newwidth);
    }
}

and then at the end of your page load function (or wherever you want to be adding new data) add this function call:

addData(5, chartFuelSpend);

But bear in mind this will require however much data you want to add and the chart instance.

And the HTML:

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

I’m guessing the problem was that because the width of the single wrapper you had was changing along with the chart, it meant that the horizontal scroll wasn’t being applied, this way the outer wrapper has the fixed width while the inside one and the canvas can expand.

Leave a comment