Add optional Formatter function for x-value

Question

Add optional Formatter function for x-value

leonard84 opened this issue 2 years ago · 13 comments

When using baseTime and a time scale, the x-axis gets nicely formatted, but the tooltip still shows the raw value for the x-axis. It would be nice if it was possible to pass a formatter function, so that you could see the actual date and time.

huww98 commented 2 years ago

6c5d9ec

leonard84 commented 2 years ago

thanks

Answer 1 · 2022-10-10T16:16:23.000Z

How can I prevent the xTooltip from being clipped? I need to include the date portion as well and this causes the text to be elided. Same for the other labels under X.

Answer 2 · 2022-10-10T16:21:24.000Z

I don't have a good solution. You may inject some CSS style into the chart with JS. This seems hacky but should work.

Answer 3 · 2022-10-10T16:33:54.000Z

for example:

chart.shadowRoot.querySelector('chart-tooltip').shadowRoot.querySelector('style').innerText += `.value { min-width: 200px; max-width: 200px }`

Answer 4 · 2022-10-10T16:39:35.000Z

Can't you use the domain values and the max label length to dynamically calculate the needed tooltip max-size?

Answer 5 · 2022-10-10T16:49:49.000Z

For labels, it is already dynamically expanding to 100px, maybe you just need a larger max-size?

For domain value, since the length of the formatted string may change, I don't want the size of tooltip to change constantly.

Answer 6 · 2022-10-11T16:07:50.000Z

We could reduce the flatter, by only ever growing the box (up to a configurable maximum) if we see a larger value.

Answer 7 · 2022-10-12T02:31:12.000Z

Yes, but that could be difficult to implement.

Answer 8 · 2022-10-12T15:42:47.000Z

Could you offer configurable sizes for the tooltip then to get rid of the workaround with shadowRoot?

Answer 9 · 2022-10-12T16:14:09.000Z

I think the ::part CSS pseudo-element can be used. I will look at this next weekend.

Answer 10 · 2022-10-24T03:48:44.000Z

I think the ::part CSS pseudo-element can be used.

This is more difficult than I thought. ::part cannot select elements in the nested shadow root.

Maybe I should adopt a more Web Component like interface. But I would leave the interface changes to future v2.0.

Answer 11 · 2022-10-24T10:06:58.000Z

I was thinking on making parts the of the style content configurable, you already create it via js in the tooltip plugin anyway, so it should be possible to use parameters for the css.