[Feature] accessing legend unselected series in tooltip formatter function

[revintec]

What problem does this feature solve?

https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrD-bFTQAgTupABGwGBgwAC2BABEAEwApOmh6HhU4fQs0cQe6OkAjOlEAGYBhfywdiEkycD-kCAxzWBGrKxUHBmMuHh5zXWcKcwsIwAUjBwcAJTwAHyxHgJUcQqDw83o9DB4nVQAdP7ArEsrq82t6A4khUZUhLCizdukQmARN8qgBWAAMPFgmQAzBCoZkACyQzJVAAckKq0JBGIRAHZkQA2MHWfKkCjUOj-CDQZSQ6CMFLearpJ6kv6CYRiGFwzKI5FojFYnH4qFEknHTwU2RUmkyemMohZFkeZ6wWx2ADcQA

---

in the tooltip formatter callback, arr contains only legend selected series, making it almost impossible to access unselected ones. I wanna achieve something like this, notice the series unselected by legend are still shown in the tooltip

accessing the unselected data through getOption is not viable here, as one can unselect all series, making it impossible to get data index through arr[0].dataIndex. and different series may have different data layout, we can't simply reuse dataIndex

---

I did a lot of code reading but can't find where the dataByCoordSys is actually populated(checked filterSeries and related code but no luck

• can you point me the code path?

---

What does the proposed API look like?

modify the formatter callback signature like this, it should be mostly backward compatible
if concerned, we could add toString and toJSON to the new object, or just append a new parameter instead

or we we could do the following, it works according to ECMA standards although it may look unconventional

[helgasoft]

one possible solution
And here is the answer from DeepSeek. Hmm, better than mine.

  tooltip: {
    trigger: "axis",
    formatter: (arr) => {
      const dataIndex = arr[0].dataIndex; // Current x-axis index
      const xCategory = option.xAxis.data[dataIndex]; // x-axis label (e.g., 'Mon')
      let content = `${xCategory}<br/>`; // Start building the tooltip content
  
      // Loop through all series in the option
      option.series.forEach((series) => {
        const value = series.data[dataIndex] ?? 'N/A'; // Use 'N/A' if data is missing
        content += `${series.name}: ${value}<br/>`; // Add series name and value
      });
  
      return content;
    }
  }

[MatthiasMert]

Here is another possible workaround which takes advantage of echarts standard formatters by only modifying the visuals of legend items and series. The basic idea is to keep track of the state of selected series yourself and set the echarts legends items always to selected state after a change event. Based on your own state, series color is set to transparent and legend color to grey.

[revintec]

one possible solution And here is the answer from DeepSeek. Hmm, better than mine.

  tooltip: {
    trigger: "axis",
    formatter: (arr) => {
      const dataIndex = arr[0].dataIndex; // Current x-axis index
      const xCategory = option.xAxis.data[dataIndex]; // x-axis label (e.g., 'Mon')
      let content = `${xCategory}<br/>`; // Start building the tooltip content
  
      // Loop through all series in the option
      option.series.forEach((series) => {
        const value = series.data[dataIndex] ?? 'N/A'; // Use 'N/A' if data is missing
        content += `${series.name}: ${value}<br/>`; // Add series name and value
      });
  
      return content;
    }
  }

thanks for the reply. I did come up with that solution, but it has some drawbacks(mentioned in the original post

[revintec]

Here is another possible workaround which takes advantage of echarts standard formatters by only modifying the visuals of legend items and series. The basic idea is to keep track of the state of selected series yourself and set the echarts legends items always to selected state after a change event. Based on your own state, series color is set to transparent and legend color to grey.

thanks for that, this is a great workaround, though hacky, it solves all the problems, and no data layout issues
still, hope echarts will someday have these features builtin, so we could write less code :P