chartjs/Chart.js

some points and line segments remain clipped when setting `clip: false`

indirectlylit opened this issue · 0 comments

Expected behavior

My goal is to render points and line segments outside the chart area. This almost works by setting the dataset clip option to false, but not quite. Expected that when clipping is disabled, all points and line segments that can be shown, should in fact be shown.

Current behavior

This function trims data points that are outside the chart area even if they would be visible on the canvas:

let {start, count} = _getStartAndCountOfVisiblePoints(meta, points, animationsDisabled);
this._drawStart = start;
this._drawCount = count;

This prevents the clip: false option from working as expected.

Reproducible sample

https://codepen.io/devon_fg/pen/poXmLQG?editors=0010

observed expected
image image

Optional extra steps/info to reproduce

In the provided codepen, the first three data points are:

                {x: 1.4, y: 0},
                {x: 1.45, y: 12},
                {x: 1.6, y: 3},

All of these ought to be displayed, but in fact only the last point and the line segment preceding it are.

Possible solutions

  • _getStartAndCountOfVisiblePoints could be updated to account for clipping behavior and the full visible canvas
  • an option could be provided to disable the point trimming behavior altogether

Context

In our system we are animating new data entering and exiting the chart as the x-axis timebounds change. The current behavior causes data to suddenly appear rather than smoothly enter from offscreen.

chart.js version

v4.4.0

Browser name and version

No response

Link to your project

No response