Skip to content

Commit 49de6c1

Browse files
stockiNailstockiNail
authored
Update to Chart.js 3.0 (#390)
1 parent 378b96d commit 49de6c1

17 files changed

+167
-246
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# chartjs-plugin-zoom
22

3-
A zoom and pan plugin for Chart.js. Currently requires Chart.js >= 2.6.0
3+
A zoom and pan plugin for Chart.js >= 3.0.0.
4+
5+
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).
46

57
Panning can be done via the mouse or with a finger.
68
Zooming is done via the mouse wheel or via a pinch gesture. [Hammer.js](https://hammerjs.github.io/) is used for gesture recognition.

‎karma.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ module.exports = function(karma) {
4747
// {pattern: 'test/fixtures/**/*.js', included: false},
4848
// {pattern: 'test/fixtures/**/*.json', included: false},
4949
// {pattern: 'test/fixtures/**/*.png', included: false},
50-
'node_modules/chart.js/dist/Chart.js',
50+
'node_modules/chart.js/dist/chart.js',
5151
'test/index.js',
5252
'src/plugin.js'
5353
].concat(args.inputs),

‎package-lock.json‎

Lines changed: 4 additions & 33 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"test": "gulp test"
1616
},
1717
"devDependencies": {
18-
"chart.js": "^2.9.2",
18+
"chart.js": "^3.0.0-beta.6",
1919
"coveralls": "^3.1.0",
2020
"eslint": "^5.12.1",
2121
"eslint-config-chartjs": "^0.1.0",
@@ -49,7 +49,7 @@
4949
"yargs": "^15.3.1"
5050
},
5151
"peerDependencies": {
52-
"chart.js": "^2.6.0"
52+
"chart.js": "^3.0.0-beta.6"
5353
},
5454
"dependencies": {
5555
"hammerjs": "^2.0.8"

‎samples/pan-bar.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<title>Bar Chart Pan</title>
6-
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
77
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
88
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
99

@@ -69,12 +69,10 @@
6969
text: 'Chart.js Bar Chart'
7070
},
7171
scales: {
72-
xAxes: [{
73-
ticks: {
74-
min: 'March',
75-
max: 'August'
76-
}
77-
}]
72+
x: {
73+
min: 'March',
74+
max: 'August'
75+
}
7876
},
7977
plugins: {
8078
zoom: {

‎samples/zoom-bar-x.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<title>Bar Chart Zoom</title>
6-
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
77
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
88
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
99

@@ -69,12 +69,10 @@
6969
text: 'Chart.js Bar Chart'
7070
},
7171
scales: {
72-
xAxes: [{
73-
ticks: {
74-
min: 'February-16',
75-
max: 'June-16'
76-
}
77-
}]
72+
x: {
73+
min: 'February-16',
74+
max: 'June-16'
75+
}
7876
},
7977
plugins: {
8078
zoom: {

‎samples/zoom-bar.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<title>Bar Chart Zoom</title>
6-
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
77
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
88
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
99

@@ -69,12 +69,10 @@
6969
text: 'Chart.js Bar Chart'
7070
},
7171
scales: {
72-
xAxes: [{
73-
ticks: {
74-
min: 'February',
75-
max: 'June'
76-
}
77-
}]
72+
x: {
73+
min: 'February',
74+
max: 'June'
75+
}
7876
},
7977
plugins: {
8078
zoom: {

‎samples/zoom-horizontal-bar.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<title>Horizontal Bar Chart Zoom</title>
6-
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
77
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
88
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
99

@@ -29,7 +29,6 @@
2929
var barChartData = {
3030
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'],
3131
datasets: [{
32-
label: 'Dataset 1',
3332
backgroundColor: 'rgba(220,220,220,0.5)',
3433
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()]
3534
}, {
@@ -47,9 +46,10 @@
4746
window.onload = function() {
4847
var ctx = document.getElementById('canvas').getContext('2d');
4948
window.myBar = new window.Chart(ctx, {
50-
type: 'horizontalBar',
49+
type: 'bar',
5150
data: barChartData,
5251
options: {
52+
indexAxis: 'y',
5353
// Elements options apply to all of the options unless overridden in a dataset
5454
// In this case, we are setting the border of each bar to be 2px wide and green
5555
elements: {
@@ -68,12 +68,11 @@
6868
text: 'Chart.js Bar Chart'
6969
},
7070
scales: {
71-
yAxes: [{
72-
ticks: {
73-
min: 'April-16',
74-
max: 'August-16'
75-
}
76-
}]
71+
y: {
72+
type: 'category',
73+
min: 'April-16',
74+
max: 'August-16'
75+
}
7776
},
7877
plugins: {
7978
zoom: {

‎samples/zoom-log.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<title>Scatter Chart</title>
6-
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6"></script>
77
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
88
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
99

@@ -137,19 +137,20 @@
137137

138138
window.onload = function() {
139139
var ctx = document.getElementById('canvas').getContext('2d');
140-
window.myScatter = window.Chart.Scatter(ctx, {
140+
window.myScatter = new window.Chart(ctx, {
141+
type: 'scatter',
141142
data: scatterChartData,
142143
options: {
143144
title: {
144145
display: true,
145146
text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
146147
},
147148
scales: {
148-
xAxes: [{
149+
x: {
149150
type: 'logarithmic',
150151
position: 'bottom',
151152
ticks: {
152-
userCallback: function(tick) {
153+
callback: function(tick) {
153154
var remain = tick / (Math.pow(10, Math.floor(window.Chart.helpers.log10(tick))));
154155
if (remain === 1 || remain === 2 || remain === 5) {
155156
return tick.toString() + 'Hz';
@@ -162,19 +163,19 @@
162163
labelString: 'Frequency',
163164
display: true,
164165
},
165-
}],
166-
yAxes: [{
166+
},
167+
y: {
167168
type: 'linear',
168169
ticks: {
169-
userCallback: function(tick) {
170+
callback: function(tick) {
170171
return tick.toFixed(0) + 'dB';
171172
}
172173
},
173174
scaleLabel: {
174175
labelString: 'Voltage',
175176
display: true
176177
}
177-
}]
178+
}
178179
},
179180
plugins: {
180181
zoom: {

‎samples/zoom-time.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<head>
55
<title>Line Chart</title>
66
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
7-
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
7+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
89
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
9-
<script src="../dist/chartjs-plugin-zoom.min.js"></script>
10+
<script src="../dist/chartjs-plugin-zoom.js"></script>
1011

1112
<style>
1213
canvas {
@@ -87,7 +88,7 @@
8788
text: 'Chart.js Time Scale'
8889
},
8990
scales: {
90-
xAxes: [{
91+
x: {
9192
type: 'time',
9293
time: {
9394
parser: timeFormat,
@@ -101,13 +102,13 @@
101102
ticks: {
102103
maxRotation: 0
103104
}
104-
}],
105-
yAxes: [{
105+
},
106+
y: {
106107
scaleLabel: {
107108
display: true,
108109
labelString: 'value'
109110
}
110-
}]
111+
}
111112
},
112113
plugins: {
113114
zoom: {

0 commit comments

Comments
 (0)