diff --git a/README.md b/README.md
index 72fffd66f..b61182ba0 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
# chartjs-plugin-zoom
-A zoom and pan plugin for Chart.js. Currently requires Chart.js >= 2.6.0
+A zoom and pan plugin for Chart.js >= 3.0.0.
+
+For Chart.js 2.6.0 to 2.9.x support, use [version 0.7.7 of this plugin](https://github.com/chartjs/chartjs-plugin-zoom/releases/tag/v0.7.7).
Panning can be done via the mouse or with a finger.
Zooming is done via the mouse wheel or via a pinch gesture. [Hammer.js](https://hammerjs.github.io/) is used for gesture recognition.
diff --git a/karma.conf.js b/karma.conf.js
index 4cea75ad3..07a5be18e 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -47,7 +47,7 @@ module.exports = function(karma) {
// {pattern: 'test/fixtures/**/*.js', included: false},
// {pattern: 'test/fixtures/**/*.json', included: false},
// {pattern: 'test/fixtures/**/*.png', included: false},
- 'node_modules/chart.js/dist/Chart.js',
+ 'node_modules/chart.js/dist/chart.js',
'test/index.js',
'src/plugin.js'
].concat(args.inputs),
diff --git a/package-lock.json b/package-lock.json
index 9f32f3b58..c13298e55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1098,33 +1098,10 @@
"dev": true
},
"chart.js": {
- "version": "2.9.3",
- "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
- "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
- "dev": true,
- "requires": {
- "chartjs-color": "^2.1.0",
- "moment": "^2.10.2"
- }
- },
- "chartjs-color": {
- "version": "2.4.1",
- "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
- "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
- "dev": true,
- "requires": {
- "chartjs-color-string": "^0.6.0",
- "color-convert": "^1.9.3"
- }
- },
- "chartjs-color-string": {
- "version": "0.6.0",
- "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
- "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
- "dev": true,
- "requires": {
- "color-name": "^1.0.0"
- }
+ "version": "3.0.0-beta.6",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.0.0-beta.6.tgz",
+ "integrity": "sha512-Dq7veoux6ccaUHoA9Z5P5YvOqWWqLJcl3MNFZn+mYyyVqrtPbxXqWCzYwUlU7rovHcLy9FwoCSCGECcRN03FIg==",
+ "dev": true
},
"chokidar": {
"version": "2.1.8",
@@ -5090,12 +5067,6 @@
"minimist": "^1.2.5"
}
},
- "moment": {
- "version": "2.26.0",
- "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
- "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==",
- "dev": true
- },
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 8134b71b5..a0e2dab04 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"test": "gulp test"
},
"devDependencies": {
- "chart.js": "^2.9.2",
+ "chart.js": "^3.0.0-beta.6",
"coveralls": "^3.1.0",
"eslint": "^5.12.1",
"eslint-config-chartjs": "^0.1.0",
@@ -49,7 +49,7 @@
"yargs": "^15.3.1"
},
"peerDependencies": {
- "chart.js": "^2.6.0"
+ "chart.js": "^3.0.0-beta.6"
},
"dependencies": {
"hammerjs": "^2.0.8"
diff --git a/samples/pan-bar.html b/samples/pan-bar.html
index c0e2931b9..d813e2dde 100644
--- a/samples/pan-bar.html
+++ b/samples/pan-bar.html
@@ -3,7 +3,7 @@
Bar Chart Pan
-
+
@@ -69,12 +69,10 @@
text: 'Chart.js Bar Chart'
},
scales: {
- xAxes: [{
- ticks: {
- min: 'March',
- max: 'August'
- }
- }]
+ x: {
+ min: 'March',
+ max: 'August'
+ }
},
plugins: {
zoom: {
diff --git a/samples/zoom-bar-x.html b/samples/zoom-bar-x.html
index 145c4816a..ac5effa1a 100644
--- a/samples/zoom-bar-x.html
+++ b/samples/zoom-bar-x.html
@@ -3,7 +3,7 @@
Bar Chart Zoom
-
+
@@ -69,12 +69,10 @@
text: 'Chart.js Bar Chart'
},
scales: {
- xAxes: [{
- ticks: {
- min: 'February-16',
- max: 'June-16'
- }
- }]
+ x: {
+ min: 'February-16',
+ max: 'June-16'
+ }
},
plugins: {
zoom: {
diff --git a/samples/zoom-bar.html b/samples/zoom-bar.html
index 6025c40b6..fbf5c7b3b 100644
--- a/samples/zoom-bar.html
+++ b/samples/zoom-bar.html
@@ -3,7 +3,7 @@
Bar Chart Zoom
-
+
@@ -69,12 +69,10 @@
text: 'Chart.js Bar Chart'
},
scales: {
- xAxes: [{
- ticks: {
- min: 'February',
- max: 'June'
- }
- }]
+ x: {
+ min: 'February',
+ max: 'June'
+ }
},
plugins: {
zoom: {
diff --git a/samples/zoom-horizontal-bar.html b/samples/zoom-horizontal-bar.html
index 88d66268c..e000826fd 100644
--- a/samples/zoom-horizontal-bar.html
+++ b/samples/zoom-horizontal-bar.html
@@ -3,7 +3,7 @@
Horizontal Bar Chart Zoom
-
+
@@ -29,7 +29,6 @@
var barChartData = {
labels: ['January-16', 'February-16', 'March-16', 'April-16', 'May-16', 'June-16', 'July-16', 'August-16', 'September-16', 'October-16', 'November-16', 'December-16', 'January-17', 'February-17', 'March-17', 'April-17', 'May-17', 'June-17', 'July-17', 'August-17', 'September-17', 'October-17', 'November-17', 'December-17'],
datasets: [{
- label: 'Dataset 1',
backgroundColor: 'rgba(220,220,220,0.5)',
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
@@ -47,9 +46,10 @@
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new window.Chart(ctx, {
- type: 'horizontalBar',
+ type: 'bar',
data: barChartData,
options: {
+ indexAxis: 'y',
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each bar to be 2px wide and green
elements: {
@@ -68,12 +68,11 @@
text: 'Chart.js Bar Chart'
},
scales: {
- yAxes: [{
- ticks: {
- min: 'April-16',
- max: 'August-16'
- }
- }]
+ y: {
+ type: 'category',
+ min: 'April-16',
+ max: 'August-16'
+ }
},
plugins: {
zoom: {
diff --git a/samples/zoom-log.html b/samples/zoom-log.html
index 233309aaf..9163aa9ef 100644
--- a/samples/zoom-log.html
+++ b/samples/zoom-log.html
@@ -3,7 +3,7 @@
Scatter Chart
-
+
@@ -137,7 +137,8 @@
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
- window.myScatter = window.Chart.Scatter(ctx, {
+ window.myScatter = new window.Chart(ctx, {
+ type: 'scatter',
data: scatterChartData,
options: {
title: {
@@ -145,11 +146,11 @@
text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
},
scales: {
- xAxes: [{
+ x: {
type: 'logarithmic',
position: 'bottom',
ticks: {
- userCallback: function(tick) {
+ callback: function(tick) {
var remain = tick / (Math.pow(10, Math.floor(window.Chart.helpers.log10(tick))));
if (remain === 1 || remain === 2 || remain === 5) {
return tick.toString() + 'Hz';
@@ -162,11 +163,11 @@
labelString: 'Frequency',
display: true,
},
- }],
- yAxes: [{
+ },
+ y: {
type: 'linear',
ticks: {
- userCallback: function(tick) {
+ callback: function(tick) {
return tick.toFixed(0) + 'dB';
}
},
@@ -174,7 +175,7 @@
labelString: 'Voltage',
display: true
}
- }]
+ }
},
plugins: {
zoom: {
diff --git a/samples/zoom-time.html b/samples/zoom-time.html
index 6e8cb1143..d3c3868d8 100644
--- a/samples/zoom-time.html
+++ b/samples/zoom-time.html
@@ -4,9 +4,10 @@
Line Chart
-
+
+
-
+