Zoom And Pan Options in Vue Charts

[arunrreddy]

This would be a handy enhancement. There is a repo called which does exactly this - chartjs-plugin-zoom.js(https://github.com/chartjs/chartjs-plugin-zoom).
This feature would be good if it was integrated for Vue for both the axes of a chart.

[apertureless]

Hey @arunrreddy !

Well, vue-chart.js is only a wrapper for Chart.js
So functions like this would be rather an imporvement for chart.js as for this repo.

However as we are using Chart.js under the hood, you can use any chart.js plugins available! So you can also use the chartjs-plugin-zoom and mostly any other plugin from the chart.js eco-system :)

[arunrreddy]

I had tried to incorporate it but it did not work.

…

On Fri, Apr 28, 2017 at 3:08 PM, Jakub ***@***.***> wrote: Well, vue-chart.js is only a wrapper for Chart.js So functions like this would be rather an imporvement for chart.js However as we are using Chart.js under the hood, you can use any chart.js plugins available! So you can also use the chartjs-plugin-zoom — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#94 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQ_9XIh7UAYb4UuS0Wb3RVuySsvkaVf-ks5r0bN7gaJpZM4NLGRb> .

[apertureless]

Well for me its working 🙈

https://codepen.io/apertureless/full/KmWmKp/

[lionel-bijaoui]

Here is an example of incorporation into a webpack project.
Very basic example from the quick start:

// CommitChart.js
import { Bar } from 'vue-chartjs'
import zoom from 'chartjs-plugin-zoom';

export default Bar.extend({
  mounted () {
    this.addPlugin(zoom);
    // Overwriting base render method with actual data.
    this.renderChart(data, options)
  }
})

Very basic example with reactive data from the doc:

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

export default Line.extend({
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
        this.addPlugin(zoom);
        // this.chartData is created in the mixin
        this.renderChart(this.chartData, this.options);
    }
});

Don't forget to add the options !

[vlad909]

@lionel-bijaoui, tnx very much :)

[ppirrip]

hi, chartjs-plugin-zoom works well with my vue-chart.js setup, however, I have some problem with resetting the zoom (resetZoom()). From the example, I need to access to the chart object (window.myLine = new Chart(ctx, config)) to access the function (e.g. window.myLine.resetZoom()), but I have no idea how. Anyone encounter this before?

[ppirrip]

Got it! Should have read the doc more carefully before I ask. This works for me: this.$data._chart.resetZoom();

[nauhalf]

Here is an example of incorporation into a webpack project.
Very basic example from the quick start:

// CommitChart.js
import { Bar } from 'vue-chartjs'
import zoom from 'chartjs-plugin-zoom';

export default Bar.extend({
  mounted () {
    this.addPlugin(zoom);
    // Overwriting base render method with actual data.
    this.renderChart(data, options)
  }
})

Very basic example with reactive data from the doc:

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

export default Line.extend({
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
        this.addPlugin(zoom);
        // this.chartData is created in the mixin
        this.renderChart(this.chartData, this.options);
    }
});

Don't forget to add the options !

@lionel-bijaoui I try this method, it works on zoom and pan. But my scale ticks yAxes callback not working. It reset to default after first time zoom.

Before Zoom

After Zoom

This is my scale ticks callback
scales: { yAxes: [ { ticks: { callback: label => numeral(label).format("0.00 a") //just formatting number with numeral js } } ] }

Is it bug from zoom plugin or vue-chartjs ? Thank you

[ghost]

I have the same issue as @nauhalf . My options in terms of scales seem to be completely lost after the first interaction with the chart (zoom or pan). I believe this is because the plugin calls the chart update method but doesn't pass the options object defined in the component's data (like we're supposed to do with Vue). Any way to make this work or is it a lost cause?

[nauhalf]

@vbersier After many tried, I found that in only lost the callback on new version library. I change the version of the libraries like this.

vue-chart-js: ^3.5.0
chart.js: ^2.9.3
chartjs-plugin-zoom: ^0.7.7

I hope it works well for you too.

[ghost]

Thanks @nauhalf , since I could not really wait I implemented my own zoom function with sliders next to the axes but maybe that will help developers figure out what changed.