Chartjs-How can I create a vertical scrolling in Chart.js for line chart?

by

0👍

What type of vertical scroll are you trying to achieve? If you are trying to scroll the whole chart vertically, why not just put the canvas element used by Chart.JS inside of a div.
E.g.

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

And then add CSS giving heights to canvas and a smaller height / overflow-y to the container.

    #chartContainer{ overflow: scroll, height: 300px; }  #myChart{ height: 600px; }

Edit 1
The snippet above works for me. Without seeing a pen, it is difficult to understand what the specific problem with your chart is and how this snippet works differently from your expected behaviour.

Without a pen or more detail I’m only able to guess, but is the problem that you have added the overflow property to the container, but that no scroll occurs (i.e. the full chart is shown)?

If so, it may just be that the chart’s size is smaller than the container’s overflow boundary (which can easily be tested by inspecting the canvas and container elements in your browser to see whether the canvas is larger than the container). If this is the case, and you would like to increase the size of the chart (so as to force the overflow to occur whenever the page is viewed), you can do so using the guidance in the chart.js documentation.

Basic example of such config below:

HTML, separating scroll container and chart container to allow separate sizing of the chart element:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>

CSS, adding size to the chartContainer to size the chart:

#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;

}

JavaScript chart object, with the aspect ratio property set to false:

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
        data: [86,114,106,86,114,106],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,282,350,411],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,168,170,178],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});

demo:

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
      data: [86,114,106,86,114,106],
      label: "Africa",
      borderColor: "#3e95cd",
      fill: false
    }, { 
      data: [282,350,411,282,350,411],
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }, { 
      data: [168,170,178,168,170,178],
      label: "Europe",
      borderColor: "#3cba9f",
      fill: false
    }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});
#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>

Leave a comment