Posted in Uncategorized

Clipping around the chart area.

   February 23, 2021  2 Comments on Clipping around the chart area.

Expected Behavior

Bubble in bubble chart should goes under X axis like an sunset.

Current Behavior

When I have bubble chart and it has some positive bubble value with center close to X axis, part of bubble shown below X

Possible Solution

Not sure how to implement but it would be great if nothing will go outside X axis below it. So it’s like part of bubble should go below X axis and be hidden. Like an sunset.

Steps to Reproduce (for bugs)

  1. create chart wit bubbles
  2. one of the bubble value should have small value by Y axis so it would be close to X Axis and part of that bubble would be under X axis.

Context

Environment

  • Chart.js version: 2.x
  • Browser name and version: Chrome
  • Link to your project: restricted

Author: Fantashit

2 thoughts on “Clipping around the chart area.”

  2. I think we need to add options to control dataset clipping instead of hard-coding this behavior and avoid a specific use case that might not fit well for everyone (as it’s the case for line and bar controllers).

    For now, you can write a simple plugin (jsfiddle):

    var clipper = {
  beforeDatasetsDraw: function(chart) {
    Chart.helpers.canvas.clipArea(chart.ctx, chart.chartArea);
  },
  afterDatasetsDraw: function(chart) {
    Chart.helpers.canvas.unclipArea(chart.ctx);
  }
};

new Chart('chart', {
  plugins: [clipper]
});

Comments are closed.