chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.94k stars 11.89k forks source link

Interpolating null data values #11629

Open fireflysemantics opened 6 months ago

fireflysemantics commented 6 months ago

Feature Proposal

It would be nice if chartjs could "Interpolate" null values provided in the data set.

This is a SO question for context.

So for example if we provide data like this:

data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Blue", "Yellow", "Green", "Purple", "Green"],
      datasets: [
        {
          label: '# of Points',
          data: [7, null, 11, null,  5 , null,  8, null,   3, null,  7],
          fill: true,
          tension: 0.4,
          borderWidth: 1,
          pointHitRadius: 25,
          spanGaps: true
        }
      ]
    },

It would be lovely if we could retrieve the bezier curve that displays the values with something like const curve = chart.getLines()[0] and then request that it interpolate the values:

const points = curve.interpolate();

And that would fill in the null values.

Another thing that would be neat is if we could target segments for more labels and values.

For example in Inkscape we can select nodes and click add node to add more nodes.

Here's a demo: https://youtu.be/dVjJfx2oc5w?t=173

It would be neat if ChartJS could do something like this adding empty labels and corresponding values for a segment where we are requesting that more values be added. So for example:

plot.addValues(startPoint, EndPoint, N);

That would add N more values between the start and end point and the labels would be empty strings.

Possible Implementation

No response

fireflysemantics commented 5 months ago

Kikon on Stackoverflow implemented a solution. it would be really cool if this made it into the Chart.js API.

https://stackoverflow.com/questions/77865725/obtaining-the-coordinate-of-a-null-value-when-using-spangaps-with-chartjs