[Feature] Line chart tooltip needs axisValueLabel.formatter

[anentropic]

What problem does this feature solve?

I have a line chart with time series data like:

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

[AutumnLeaf1201]

Hi，would you mind providing the data you set in program or a demo。

[echarts-bot[bot]]

@anentropic Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

[anentropic]

Here is an example: https://echarts.apache.org/examples/en/editor.html?c=area-time-axis&code=DYUwLgBAJghmMQLwQNoCgKayg5AJgAYBGADgFoCAWMoggFQIIC5GWCAtHAGgiJ4FYAulwxZMuQqQrUiRBs1aNOPPDwDMw0WInFyVGnnls2yiJRWax4_Luk01RxR24R-PIpas6p-opUcKzjwAbDwEgmgRAPYADmAAllEAdkgQAN6iYFFRwAkxTOlaEGAATvEA5uUgJQU4MAAe8QDO3EUAbjDAAK4gAGJRJQC2cGDVBQAUHd0gAJRIAHwQAAYAJGlTPQB0Wb3x9SBQ43gzAL5LImIA9JcQJSAxwDAAxiBNEADuABY5IMXZufEYhAnslRkkwEwitcIAAzAbDMCjGoQHBpJ4nAA8ACMSvM0lATq1MCcLhB6gBBRpNAoZMRgACeMRAtQSgxARKwDWaABkYFiQMAaUVMNC4UM4G8wJ9fgkngBrCCPfnAN5YrqQJJRSBSmX_PKQqwQUXwkZjCCTTo9OaIRarNJJEDvCAAETgIAt01OSyKJ1EJNE9MpzSFdMZzJRG3ZpMwWKiXSSsBK9IA4jB8qgCDwcLQAKQ4CLE0mweBNcAhrBNOMlF5MYswaPQeJspJNRItgq4VmveCDGIuHCllsDIj9weVkp4fOk_2YUtlV4doq0qxJGBs2oAZRAQ5KvA5oaZtWA8Qd-6w25BUHDaXptTHw5wM6wT4iJwA3EA

I want to keep the default tooptip content but apply a formatter to just the x-axis value, which appears as title of the tooltip

[nunknown]

Here is an example: https://echarts.apache.org/examples/en/editor.html?c=area-time-axis&code=DYUwLgBAJghmMQLwQNoCgKayg5AJgAYBGADgFoCAWMoggFQIIC5GWCAtHAGgiJ4FYAulwxZMuQqQrUiRBs1aNOPPDwDMw0WInFyVGnnls2yiJRWax4_Luk01RxR24R-PIpas6p-opUcKzjwAbDwEgmgRAPYADmAAllEAdkgQAN6iYFFRwAkxTOlaEGAATvEA5uUgJQU4MAAe8QDO3EUAbjDAAK4gAGJRJQC2cGDVBQAUHd0gAJRIAHwQAAYAJGlTPQB0Wb3x9SBQ43gzAL5LImIA9JcQJSAxwDAAxiBNEADuABY5IMXZufEYhAnslRkkwEwitcIAAzAbDMCjGoQHBpJ4nAA8ACMSvM0lATq1MCcLhB6gBBRpNAoZMRgACeMRAtQSgxARKwDWaABkYFiQMAaUVMNC4UM4G8wJ9fgkngBrCCPfnAN5YrqQJJRSBSmX_PKQqwQUXwkZjCCTTo9OaIRarNJJEDvCAAETgIAt01OSyKJ1EJNE9MpzSFdMZzJRG3ZpMwWKiXSSsBK9IA4jB8qgCDwcLQAKQ4CLE0mweBNcAhrBNOMlF5MYswaPQeJspJNRItgq4VmveCDGIuHCllsDIj9weVkp4fOk_2YUtlV4doq0qxJGBs2oAZRAQ5KvA5oaZtWA8Qd-6w25BUHDaXptTHw5wM6wT4iJwA3EA

I want to keep the default tooptip content but apply a formatter to just the x-axis value, which appears as title of the tooltip

Is this xAxis.axisPointer.label.formatter what you are looking for? Example

[anentropic]

Is this xAxis.axisPointer.label.formatter what you are looking for?

Yes! This seems to be exactly what I was looking for, thank you.

[anentropic]

FYI it seems like https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.fontFamily is not respected in the current tooltip implementation e.g. example chart

Also, for anyone else confused that xAxis.axisPointer.label controls tooltip content ... you can get the same result by setting formatter on tooltip.axisPointer.label: example chart