3

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;
}
Tahir Ali
  • 155
  • 1
  • 2
  • 10

2 Answers2

6

a

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

= 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):

enter image description here

** 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>
Ezra Siton
  • 6,887
  • 2
  • 25
  • 37
  • I tried your solution it is working fine in the scenario that you described (chart becomes horizontally scroll able when screen is smaller than 900px) but it is not solution of my problem. Actually am displaying data of entire year by day, the data points are too closer to each other currently. I want to expand chart horizontally so data points have some space between them and chart becomes scroll able too, so user can view all the data points by scrolling – Tahir Ali Mar 23 '20 at 05:15
  • So add width of 8000px if you want for the chart container (any width you want). Your issue related to your data not to overflow (the overflow work's fine). In your case 365 bars - this is more ui/x issue (maybe add months button to filter data (On click the user change from jan to feb and so on). Look at google Analytics charts for example. Keep in mind endless scroll = bad ui experience. Maybe add this problem to ui/x or data visualization forums. – Ezra Siton Mar 23 '20 at 06:37
  • Example: https://www.chartjs.org/samples/latest/scales/time/financial.html – Ezra Siton Mar 23 '20 at 08:00
  • The problem with increasing chart container width is that it expands vertically too instead of just expanding horizontally. – Tahir Ali Mar 23 '20 at 12:01
  • So also set height. For changeable width depend on content (Added by click for example) you should use update() function. Also, play with responsive true/false. – Ezra Siton Mar 25 '20 at 14:16
-1

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

Yedu
  • 88
  • 1
  • 4
  • Could you please share your html and javascript code? – Yedu Mar 21 '20 at 18:28
  • Updated the question. With this code now it is vertically scroll able, now if i increase the width it expands vertically but not horizontally. – Tahir Ali Mar 22 '20 at 06:00