chartjs / Chart.js

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

Time Cartesian Axis does not accumulate data points on unit change #11625

Open dodikk opened 9 months ago

dodikk commented 9 months ago

Feature Proposal

Time Axis claims to support different resolutions like days, weeks, etc. However, the collisions of data points is completely ignored by it.

For example, GIVEN two transactions have arrived on the same day. 100 USD received at 3pm, another one - 200 USD at 4pm . AND hour unit is selected - it's ok to render them as two data points WHEN unit is changed to days(or weeks/month/year/etc) THEN ACTUAL result: a spike on the same XAxis coordinate is rendered from 100 to 200 USD EXPECTED result: a single point of 300 USD is rendered

Screenshot 2024-01-02 at 15 43 42 Screenshot 2024-01-02 at 15 57 19

I've tried in this REPL https://codesandbox.io/s/friendly-snyder-e8kcd

Here is my dataset

const values = [
  {
    x: new Date("2020-01-01 15:00"),
    y: 100.2,
  },
  {
    x: new Date("2020-01-01 16:00"),
    y: 200.2,
  },
  {
    x: new Date("2020-01-02"),
    y: 102.2,
  },
  {
    x: new Date("2020-01-03"),
    y: 105.3,
  },
  {
    x: new Date("2020-01-11"),
    y: 104.4,
  },
];

Possible Implementation

As a workaround, the users are forced to process the dataset and resolve such collisions before feeding the data to ChartJS. However, i cant imagine an example of a domain where such kind of accumulation would be unwanted. Even so, having an option to enable such accumulation out of box would be a nice addition to ChartJS greatness.