Touch events are surpressed to charts that does not have zoom added as plugin
See original GitHub issueI have 3 charts on my web app. After adding the plugin to a Line chart I noticed the other 2 charts started to supress any touch event. The result is that I cant scrooll down or up when I touch any area of those other two charts. I can only scroll if I touch a area that is not on the canvas of the other two charts. The code bellow is how I added the plugin. The plugin is only in the last chart component (line).
import Vue from 'vue'
import Chart from 'chart.js'
import { Bar, Doughnut, generateChart } from 'vue-chartjs'
import zoom from 'chartjs-plugin-zoom'
Chart.defaults.LineWithLine = Chart.defaults.line
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw(ease) {
Chart.controllers.line.prototype.draw.call(this, ease)
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
const activePoint = this.chart.tooltip._active[0]
const ctx = this.chart.ctx
const x = activePoint.tooltipPosition().x
const topY = this.chart.scales['y-axis-0'].top
const bottomY = this.chart.scales['y-axis-0'].bottom
const y = activePoint.tooltipPosition().y
const leftX = this.chart.scales['x-axis-0'].left
const rightX = this.chart.scales['x-axis-0'].right
// draw line
ctx.save()
ctx.beginPath()
ctx.moveTo(x, topY)
ctx.lineTo(x, bottomY)
ctx.lineWidth = 2
ctx.strokeStyle = 'rgb(119, 122, 124)'
ctx.setLineDash([5, 5])
ctx.color = 'white'
ctx.stroke()
ctx.restore()
// draw line
ctx.save()
ctx.beginPath()
ctx.moveTo(leftX, y)
ctx.lineTo(rightX, y)
ctx.lineWidth = 2
ctx.strokeStyle = 'rgb(119, 122, 124)'
ctx.setLineDash([5, 5])
ctx.color = 'white'
ctx.stroke()
ctx.restore()
}
}
})
const CustomLine = generateChart('custom-line', 'LineWithLine')
Vue.component('barChart', {
extends: Bar,
props: {
data: {
type: Object,
default: () => {}
},
options: {
type: Object,
default: () => {}
}
},
mounted() {
this.renderChart(this.data, this.options)
}
})
Vue.component('doughnutChart', {
extends: Doughnut,
props: {
data: {
type: Object,
default: () => {}
},
options: {
type: Object,
default: () => {}
}
},
mounted() {
this.addPlugin({
id: 'kwhWeek',
afterDatasetDraw(chart) {
const width = chart.chart.width
const height = chart.chart.height
const ctx = chart.chart.ctx
ctx.restore()
ctx.font = '2em Roboto'
ctx.fillStyle = 'white'
ctx.textBaseline = 'middle'
const text =
'R$ ' +
chart.config.data.datasets[0].data
.reduce((total, value) => total + parseFloat(value), 0)
.toFixed(0)
const div = document.createElement('div')
div.innerHTML = text
div.style.position = 'absolute'
div.style.top = '-9999px'
div.style.left = '-9999px'
div.style.fontFamily = 'Roboto'
div.style.fontWeight = 'bold'
div.style.fontSize = '10pt' // or 'px'
document.body.appendChild(div)
const size = [div.offsetWidth, div.offsetHeight]
document.body.removeChild(div)
const textX = Math.round((width - ctx.measureText(text).width) / 2)
const textY = height / 2 + 2 * size[1]
ctx.fillText(text, textX, textY)
ctx.save()
}
})
this.renderChart(this.data, this.options)
}
})
Vue.component('lineChart', {
extends: CustomLine,
props: {
data: {
type: Object,
default: () => {}
},
options: {
type: Object,
default: () => {}
}
},
mounted() {
this.addPlugin(zoom)
this.renderChart(this.data, this.options)
}
})
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
chartjs - Bountysource
Created 5 years ago in chartjs/chartjs-plugin-zoom with 4 comments. ... Touch events are surpressed to charts that does not have zoom added as...
Read more >javascript - Add zoom event handler to charts for chartjs with ...
So the question is, is there a way in chartjs with chartjs-plugin-zoom to add a zoom event handler (wheel and pinch events) to...
Read more >Getting started with Zoom Rooms for Touch
You can install the Zoom Rooms software on a Windows PC that has a touchscreen, and then start or join a meeting using...
Read more >Touch table - QuirksMode
When the user pinch-zooms the touch events (and gesture events) should fire, but the mouse events should be suppressed. The browser always fires ......
Read more >Pointer Events - W3C
An additional key goal is to enable multi-threaded user agents to handle direct manipulation actions for panning and zooming (for instance, with ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I have the same problem. I noticed chartjs-plugin-zoom adds “touch-action: none;” to the style attribute of all canvas even for charts that don’t implement zoom plugin.
@AllanOricil your jsfiddle is using older versions of chart.js and the zoom plugin. I made the same mistake with my codepen on #289. Even with the latest versions of both, I am still seeing the issue you describe.