apache / apache/echarts

[Feature] Line chart tooltip needs axisValueLabel.formatter

Open
#20,076 7 comments 4 reactions 0 assignees View on GitHub
en missing-demo new-feature pending stale
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

I have a line chart with time series data like:

![Screenshot 2024-06-25 at 17 22 25](https://github.com/apache/echarts/assets/147840/1666acca-7cf1-4a06-943d-039a7199c4b4)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.