I have a question regarding vue-chartjs. I am looking to achieve a similar result to the one demonstrated in this jsfiddle example: http://jsfiddle.net/mbhavfwm/
Below is the code for my Vue.js component (Chart data is passed through 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,
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy',
}
}
}
},
mounted () {
this.addPlugin(zoom);
this.renderChart(this.chartData, this.options)
}
}
</script>My goal is to visually represent the user's walking speed during various activities throughout the day, with activities happening at different hours. I want to use a horizontal scroll to showcase these different moments. For illustration, I have attached an image showing two different activities as an example.
I attempted using the 'zoom' plugin, but it didn't quite meet my expectations. Any advice or suggestions would be greatly appreciated. https://i.sstatic.net/IPr6O.png