dojox/charting: Canvas renderer not working with Tooltip
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 151
- Forks
- 222
- PR merge metrics
- No merged PRs in 30d
Description
When using one the latest Dojo Toolkit releases (either 1.11, 1.12, 1.14, 1.15 – doesn't matter which one), the canvas based rendering of charts doesn't work with dojox/charting/action2d/Tooltip. It throws an error inside dojo.js, saying e.contains is not a function. The problem seems to arise from dojox/charting/Element.js, inside the cleanGroup method. To be honest, I haven't tested it with other actions so the same problem might occur with them as well.
I've created a JSFiddle which shows the issue:
https://jsfiddle.net/urbandrone/dxog68hk/1/
HTML
<div class="chart"></div>
JavaScript
require([
'dojox/charting/Chart',
'dojox/charting/plot2d/Columns',
'dojox/charting/axis2d/Default',
'dojox/charting/action2d/Tooltip'
], function (Chart, PlotType, Axis2D, Tooltip) {
var container = document.querySelector('.chart');
var data = [10, 20, 30, 20, 50, 40];
var chart = new Chart(container);
chart.addPlot('default', {
type: PlotType,
labels: true,
labelStyle: 'inside',
omitLabels: false,
gap: 10,
minBarSize: 33,
maxBarSize: 33
});
chart.addAxis('x', { type: Axis2D, vertical: false });
chart.addAxis('y', { type: Axis2D, vertical: true });
chart.addSeries('series a', data);
var tooltip = new Tooltip(chart, 'default');
chart.render();
})
As shown in the JS panel of the fiddle, it uses version 1.12.2 to create a simple chart with tooltips but throws the above mentioned error when the chart is created. Switching the version to 1.10 prevents it from throwing the error, so there must have been a change between 1.10 and 1.11 which causes the problem.
For the application I'm working on I cannot switch back to an older release. However, I also cannot just use the SVG based rendering, because that'll create an awful lot of nodes inside the DOM which massively drops performance in all browsers (all in all, SVG based rendering currently produces ~16.000 nodes while canvas based rendering "only" produces less then 9.500 nodes for the same page) and sometimes causes them to freeze completely.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in dojox/charting/Element.js at the cleanGroup method and reproduce the failure using the linked JSFiddle with Dojo 1.12.2. Compare the behavior with 1.10; done means the Canvas renderer works with dojox/charting/action2d/Tooltip without the e.contains error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100