bubble chart missing clipping?

[mattsouth]

This report follows a discussion on chartjs-zoom-plugin: chartjs/chartjs-plugin-zoom#266 where zooming a bubble chart can lead to bubbles being drawn outside the chart bounds:

Expected Behavior

Expected the bubbles not to be drawn outside of the chart bounds.

Current Behavior

Bubbles are drawn over the title, legend, y-axes and x-axes

Possible Solution

A workaround is available, by making the radius of bubbles scriptable, checking the bounds of the chart and setting the radius to zero if outside, see https://jsfiddle.net/otcjx5yv/ but Im guessing that drawing bubbles outside of the bounds of the chart is a bug. Ideally one would have the option of clipping bubbles that overspill outside the chart area or allowing a bubble whose centre is within the chart bounds to spill over into axes.

Steps to Reproduce (for bugs)

jsfiddle: https://jsfiddle.net/2qr50z18/1/

Context

I was trying to visualise some time series data with bubbles using a time x-axis and a category y-axis. The category y-axis has labels which can be completely occluded when zooming.

Environment

• Chart.js version: 2.9.3
• Browser name and version: firefox latest (74) and chromium latest (80)

[benmccann]

Here's another fiddle: https://jsfiddle.net/frgpk10j/

Also, I can reproduce it with https://www.chartjs.org/samples/master/charts/bubble.html though you may have to refresh a few times since the data is generated randomly

#6642 added clipping and it looks like bubble chart was intended to be supported. I'm not sure why it doesn't work

[kurkle]

Works in master (default is to allow half of bubble to overflow)
https://jsfiddle.net/qvm5athc/

The zoom plugin does not work though (probably because axes are configured differently)

[benmccann]

The only thing the zoom plugin does is set the min and max on the scales

[etimberg]

Based on the fiddle by @kurkle I think we can call this resolved in v3

[eclisia]

Hello @etimberg

I just copied the code from the workaround ( https://jsfiddle.net/otcjx5yv/ ) to make it work in my environment, but some error occured after compiling => "z' does not exist in type 'ChartPoint'"

I tried to replace z with r because ChartPoint for bubble is (x, y, r) and this is not (x, y, z)
There are no errors, but radius function is not triggered and the behavior is the same as before
However if I keep z, even if there is this errors after compiling, the workaround works just like in the example
So what is z and why are using this instead of r ?

I have the same version of chart.js (2.9.2), using it through Angular 5 on a centos 7.3