Do you want to work on this issue?
You can request for a bounty in order to promote it!
Crosshairs not animated / smooth #2436
MarkLyck posted onGitHub
<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前,请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。 2. 我们推荐如果是小问题(错别字修改,小的 bug fix)直接提交 PR。 3. 如果是一个新需求,请提供:详细需求描述,最好是有伪代码实现。 4. 如果是一个 BUG,请提供:复现步骤,错误日志以及相关配置,并尽量填写下面的模板中的条目。 5. 如果可以,请提供尽可能精简的 CodePen 链接,可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox,方便我们排查问题。 6. 扩展阅读:如何向开源项目提交无法解答的问题 -->
- G2 Version: 4.0.7
- Platform: Google Chrome
- Mini Showcase: https://ttprivatenew.s3.amazonaws.com/pulse/markl74/attachments/13447851/TinyTake610807356.mp4
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.