Open MarkLyck opened 4 years ago
I need to display a "crosshar" text with the tooltip.
Here's the code:
chart.tooltip({ showCrosshairs: true, showTitle: false, itemTpl: '<li class="chart-tooltip {className}">{value}</li>', crosshairs: { type: 'x', // @ts-ignore text: (type: string, defaultText: any) => { if (type === 'x') { return { offset: 5, position: 'end', content: format(defaultText, 'dd MMM yyyy'), style: { textAlign: 'center', textBaseline: 'top', fontSize: 14, fontWeight: '500', fill: theme.colors.lightGray, }, } } }, textBackground: { padding: [2, 4], style: { fill: theme.colors.text, opacity: 1, }, }, }, })
However, while the tooltip moves smoothly from 1 position to the other. The Crosshair text has no animation. It doesn't move like the tooltip.
Instead it just instantly appears and instantly disappears.
As a user, I would expect the tooltip and the crosshairText to both move smoothly.
We will add this small optimization in version 5.
I need to display a "crosshar" text with the tooltip.
Here's the code:
However, while the tooltip moves smoothly from 1 position to the other. The Crosshair text has no animation. It doesn't move like the tooltip.
Instead it just instantly appears and instantly disappears.
As a user, I would expect the tooltip and the crosshairText to both move smoothly.