[Chartjs]-Horizontal scroll in vue-chartjs

by

9👍

Finally I found an answer by my own:
First, we have to set a div around the chartjs component, which is in this case. Then a little of css is needed. So it would be like this:

<div class="chartAreaWrapper">
          <walking-speed-line-chart
                            v-if="chartElements1.dataCollectionLoaded"
                            :chart-data="chartElements1.dataCollection"
                            style="float: left" class="walking-speed-chart"></walking-speed-line-chart>

</div>

And corresponding css:

.chartAreaWrapper {
       width: 80%;
       overflow-x: scroll;
  }

.walking-speed-chart{
       margin-top: 20px;
       height: 170px;
       width: 1200px;
  }

As you can see, you only need to set an overflow-x: scroll property in the container div of your component. Then just fix as much width as you want.
Hope it helps!

Leave a comment