echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Feature] Line chart tooltip needs axisValueLabel.formatter

Open anentropic opened this issue 7 months ago • 3 comments

What problem does this feature solve?

I have a line chart with time series data like:

Screenshot 2024-06-25 at 17 22 25

I have "tooltip": {"trigger": "axis", ...} to get this.

I want to be able to format the x-axis value in first line of the tooltip.

But this is not possible currently AFAICT.

I tried specifying an axisLabel.formatter on the xAxis but it only affects the tick labels and not the value in the tooltip.

What is possible:

  • set a tooltip.valueFormatter - but this formats the y-axis values only (e.g. above I have used valueFormatter to add currency suffix in the tooltip)
  • set a tooltip.formatter - but this does not allow to re-use the standard tooltip layout, which is nice and convenient

I looked at making a formatter, but to recreate the default tooltip style the HTML src is too complicated and incorporates various values from the theme etc. I don't want to reinvent the wheel, I just want to customise the format of the x-axis value.

In the params object passed to the formatter is a value axisValueLabel: "2024-05-30 00:00:00" ...this is what i want to format.

What does the proposed API look like?

add a tooltip.axisValueLabelFormatter attribute, which takes a string or a (value) -> {...} callback like other value formatters

(I chose this name based on params object, see above, but maybe there is a better name)

for line chart tooltip with axis trigger this would format the value from the x-axis which is used as the title of the tooltip

anentropic avatar Jun 25 '24 16:06 anentropic