[Bug] Dataset with timeseries data

[dmke]

Version

6.0.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=MYewdgzgLgBAJgQygiBTKBlEBXATsVGAXhgG0AoGMgckSlWoBoZqFcoBLYAG0IEYmLNpx6EATINbsuvGAGZqAXUaUaYgAxiArAFp1fPQOZ9165hrMww2bt2WrS1Ddr1jDgk33P7mc_fapHZ111OXdma1sIm25fUIC1TRCAFnCYE2ToqPl1ZMVyRQBucnJQSFg0XA5UCAARJARiMlUAb1UqKABPAAdUAC4WACM2JnarBABbfqFpUXTRqipoBGAAawHqCGwJgH0wdAXFugQBikXFoKTDNJN1BPPLl00b_xVzwKcr0LTIuzf3x4pF55Mb5KgAX3-bXOXV6G2GuEOVDAk2mUhEsgk_yWyDWGy2u32UCR8AapzGH2C130ggs9wunyebhp3j49MpXzCLKsMXZiSeqW5vzBixFkNaY1haIRJJRUw2whkhAU2JgyzxLAJewOquO5Pe_JCBiFvNVHKZaT8bLNhr0XKMOTkfMBekFDr8IPOYoKxVK4GgpOQaCgAHlupxwE1oTAAB4AQRjHAgAxaMClG04U2oMHFVE6CaTKdzMF4AHNUGA4EX_lAQCBuJxuim01VS-XcArExBBAguwAFEAcMD0DswVPpzUACwQcBAAHds-Cc_9jsGU2MIDh8NNV-gsHgCKrKtUIAAJVAz1CjqC4bCoVTF481fWLcc9aUjZjq9aa7ba4nLmMb5wkMn5qriP6bH-RKLqqwEfoiX4Qfi0EHDmqj5OCvplAGT51A0YYRmAUaqPGXbNhO1CZgwgF5gWyZjsWZYVlWjE1nWDYcE2Y4thwbZXp2SY9v2g7DgJPGURA06zguOa0WqV4ngMeH1Mg5BYSUAD0mlppOSYKagEwQGmIAwHOIC4Os5DaSA4YcJGJAqQRdngFpOlQHpxmzjUYBUX05C2URTS7qGLlgEAA

Steps to Reproduce

I have an SQL data source, which gives me data in the following form:

const sqlQuery = `
  select generate_series::date as "date",
         invoices.article_id,
         sum(invoices.total_net) as sum_net
  from generate_series('2025-01-01'::date, '2025-04-01'::date, '1 month'::interval)
  join invoice_positions on date_trunc('month', invoice_positions.date) = generate_series::date
  group by generate_series::date as date, invoices.article_id
`;

const sqlResult = [
  ['date', 'article_id', 'sum_net'],
  ['2025-01-01', 1, 100],
  ['2025-01-01', 2, 200],
  ['2025-01-01', 3, null],
  ['2025-02-01', 1, 101],
  ['2025-02-01', 2, 201],
  ['2025-02-01', 3, 301],
  ['2025-03-01', 1, null],
  ['2025-03-01', 2, null],
  ['2025-03-01', 3, 303],
  ['2025-04-01', 1, 104],
  ['2025-04-01', 2, null],
  ['2025-04-01', 3, 304]
];

After some processing, I currently transfer this data to the client:

const fetchedData = {
  columns: [
    { id: 'date', type: 'date' },
    { id: 'article_id', type: 'ref' },
    { id: 'sum_net', type: 'currency' }
  ],
  rows: [
    ['2025-01-01', 1, 100],
    ['2025-01-01', 2, 200],
    ['2025-01-01', 3, null],
    ['2025-02-01', 1, 101],
    ['2025-02-01', 2, 201],
    ['2025-02-01', 3, 301],
    ['2025-03-01', 1, null],
    ['2025-03-01', 2, null],
    ['2025-03-01', 3, 303],
    ['2025-04-01', 1, 104],
    ['2025-04-01', 2, null],
    ['2025-04-01', 3, 304]
  ],
  refs: {
    article_id: [
      [1, 'article 1'],
      [2, 'article 2'],
      [3, 'article 3']
    ]
  }
};

Now, to chart this data, I have two options: Either make a dataset, or embed data in the series:

dataset.source

const datasetSource = [
  ['date', 'article 1', 'article 2', 'article 3'],
  ['2025-01-01', 100, 200, null],
  ['2025-02-01', 101, 201, 301],
  ['2025-03-01', null, null, 303],
  ['2025-04-01', 104, null, 304]
];

series[i].data

const seriesData = [
  {
    type: 'bar',
    name: 'article 1',
    stack: 'sum_net',
    data: [
      ['2025-01-01', 100],
      ['2025-02-01', 101],
      ['2025-03-01', null],
      ['2025-04-01', 104]
    ]
  },
  {
    type: 'bar',
    name: 'article 2',
    stack: 'sum_net',
    data: [
      ['2025-01-01', 200],
      ['2025-02-01', 201],
      ['2025-03-01', null],
      ['2025-04-01', null]
    ]
  },
  {
    type: 'bar',
    name: 'article 3',
    stack: 'sum_net',
    data: [
      ['2025-01-01', null],
      ['2025-02-01', 301],
      ['2025-03-01', 303],
      ['2025-04-01', 304]
    ]
  }
];

Since dataset seems to be specifically for tabular data, this option make sense to me, so I try to setup a chart like this:

option = {
  xAxis: { type: 'time' },
  yAxis: {},
  legend: {},
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  dataset: {
    source: datasetSource,
    seriesHeader: true
  },
  series: [
    { type: 'bar', stack: 'sum_net' },
    { type: 'bar', stack: 'sum_net' },
    { type: 'bar', stack: 'sum_net' }
  ]
};

Using xAxis: { type: "time" } makes intuitively sense to me.

Current Behavior

The generated graph looks wrong in multiple places:

1. The x axis starts at 1970-01-01
   • Presumably, because some date is parsed as null/NaN, which get re-interpreted as new Date(0). Not entirely sure.
2. The legend labels are pair-wise concatenated ("date article 1" and "article 2 article 3").
   • I have no clue as to how this could have happened.

Expected Behavior

Embedding the data in the series leads to the following graph:

Note:

1. The x axis correctly shows the months, and
2. The legend correctly shows three articles.

Environment

- OS: Debian 12 (that should not matter)
- Browser: Firefox 144.0, Chrome 141, Chrome 142 beta)
- Framework: none

Any additional comments?

No response

[kateEcobb]

You can also see this (broken) behavior with the simple linked dataset example, here: https://echarts.apache.org/examples/en/editor.html?c=dataset-link

try changing the xAxis type from category to time. Odd that you cannot use time as a valid dimension for a dataset.

[helgasoft]

@dmke - good presentation, @kateEcobb - good observation.
Indeed, axis type:'time' may not have undergone extensive testing with various data structures.
The data in this specific example, in my opinion, should be organized in "long format," with all article types in a separate column (like the fetchedData.rows).
Then we can use the full potential of dataset, and it works - Demo.