Horizontal scroll in vue-chartjs

Question

I have a question about vue-chartjs. I need to achieve a result like this one in jsfiddle: http://jsfiddle.net/mbhavfwm/
Here is my vuejs component's code (Chart data is sent by params).

<script>
  import { Line, mixins } from 'vue-chartjs'
  import zoom from 'chartjs-plugin-zoom';
  const { reactiveProp } = mixins;

  export default {
    extends: Line,
    mixins: [reactiveProp],
    data () {
      return {
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [
              {
                gridLines: {
                  display: false
                },
                type: "time",
                time: {
                  format: "HH:mm:ss",
                  displayFormats: {
                    'millisecond': 'h:mm a',
                    'second': 'h:mm a',
                    'minute': 'h:mm a',
                    'hour': 'h:mm a',
                    'day': 'h:mm a',
                    'week': 'h:mm a',
                    'month': 'h:mm a',
                    'quarter': 'h:mm a',
                    'year': 'h:mm a',
                  },
                  unit: "minute",
                  unitStepSize: 5,
                },
              },
            ]
          },
          legend: {
            display: false
          },
          responsive: true,
          maintainAspectRatio: false,
          // Container for pan options
          pan: {
            // Boolean to enable panning
            enabled: true,

            // Panning directions. Remove the appropriate direction to disable
            // Eg. 'y' would only allow panning in the y direction
            mode: 'xy'
          },

          // Container for zoom options
          zoom: {
            // Boolean to enable zooming
            enabled: true,

            // Zooming directions. Remove the appropriate direction to disable
            // Eg. 'y' would only allow zooming in the y direction
            mode: 'xy',
          }
        }
      }
    },
    mounted () {
      this.addPlugin(zoom);
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

I want to represent user's walking speed during different activities in a day. So all the activities may be distributed over all the hours of a day. I´m attaching a picture that shows 2 different activities as an example. What I want to achieve is drawing them in different moments of the day, so I need to use a horizontal scroll.

I tried to use 'zoom' plugin but I didn't like it that much. I would appreciate any help or suggestion.

Answer 1

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!