How to make a chart scroll horizontally (when using Chart.js)

Question

I have checked this question and this question and made the chart scroll able horizontally but its height has also increased and now it is scroll able vertically too. How can i make the chart horizontally scroll able without expanding it vertically?

HTML
<div class="chartWrapper">
 <div class="chartAreaWrapper">
    <div class="chartAreaWrapper2">
        <canvas id="canvas"></canvas>
    </div>
</div>
<canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

JS
var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
        var sourceCanvas = myLiveChart.chart.canvas;
                    var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
                    var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
                    var targetCtx = document.getElementById("myChartAxis").getContext("2d");
                    targetCtx.canvas.width = copyWidth;
            targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);

CSS
.chartWrapper {
        position: relative;

    }
    .chartWrapper > canvas {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events:none;
    }
.chartAreaWrapper {
      overflow-x: scroll;
        position: relative;
        width: 100%;
    }
    .chartAreaWrapper2 {
        position: relative;
        height: 300px;
}

Answer 1

a

chart.js docs: "The following examples do not work:"

• <canvas height="40vh" width="80vw">: invalid value https://www.chartjs.org/docs/latest/configuration/responsive.html

= Any canvas sizes like (<canvas style="width: 100px;..") + position absolute and other tricks will not work her.

b

Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

= set any size you want for chart-container.

c

• maintainAspectRatio - by default true (Maintain the original canvas aspect ratio (width / height) when resizing).

• responive - by deafult true (Resizes the chart canvas when its container does)

a+b+c

I do not know why other stackoverflow answers give such "complex" solutions. The overflow-x her works like any other block-level element (Put 800px w image inside 600px W div = 200px overflow-x).

"hello world" example

Specific for overflow add extra wrapper to chart-container:

<div style="overflow-x: scroll">
  <div class="chart-container" style="position: relative;  width:900px;">
    <canvas id="chart"></canvas>
  </div>
</div>

When the screen width will be smaller than 900px you get horizontal scroll (On mobile for example):

** Use CSS breakpoints to resize the container on mobile if you want.

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Data label",
    backgroundColor: ["red", "#8e5ea2","#3cba9f", '#1d49b8'],
    data: [5.0,6.7,7.5, 8.6, 3.3, 4.4, 4.5]
  }]
};

var options = {
  responsive: true,
  maintainAspectRatio: true,
  title: {
    text: 'Hello',
    display: true
  },
  scales: {
    xAxes: [{
      stacked: false,
      ticks: {

      },
    }],
    yAxes: [{
      stacked: true,
      ticks: {

      }
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});

document.getElementById('submitChange').addEventListener('click', function() {
  console.log("before color: " + myChart.data.datasets[0].backgroundColor[0]);
  myChart.data.datasets[0].backgroundColor[0] = "green";
  myChart.update();
});

div{
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div style="overflow-x: scroll">
  <div class="chart-container" style="position: relative;  width:900px;">
    <canvas id="chart"></canvas>
  </div>
</div>

Answer 2

Use "overflow-x:scroll;" instead of "overflow:scroll;"