I have tested it with newest version and also older versions of chart.js and its zoom plugin, but without success, then I tried from prime demo project and it's the same, not working at all.
this is the config that I'm using.
but nothing appear in console, no warning or error.
Code: Select all
this.optionChart = {
title: {
text: 'Chart.js Time Scale'
},
plugins: {
zoom: {
// 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',
rangeMin: {
// Format of min pan range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max pan range depends on scale type
x: null,
y: null
},
// Function called while the user is panning
onPan: function({ chart }) {
console.log(`I'm panning!!!`);
},
// Function called once panning is completed
onPanComplete: function({ chart }) {
console.log(`I was panned!!!`);
}
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: true,
// Enable drag-to-zoom behavior
// Drag-to-zoom rectangle style can be customized
drag: {
borderColor: 'rgba(225,225,225,0.3)',
borderWidth: 5,
backgroundColor: 'rgb(225,225,225)'
},
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'xy',
rangeMin: {
// Format of min zoom range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max zoom range depends on scale type
x: null,
y: null
},
// Speed of zoom via mouse wheel
// (percentage of zoom on a wheel event)
speed: 0.1,
// Function called while the user is zooming
onZoom: function({ chart }) {
console.log(`I'm zooming!!!`);
},
// Function called once zooming is completed
onZoomComplete: function({ chart }) {
console.log(`I was zoomed!!!`);
}
}
}
}
};