I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :
what I could do is :
tooltip implementation :
const chartOptions = {
tooltip: {
trigger: 'item',
responsive: true,
position: 'top',
formatter: '{c}',
backgroundColor: '#fafcfe',
borderColor: '#c8e2f7',
borderWidth: '0.8',
textStyle: {
color: '#5d6f80'
}
},
xAxis: {
data: xdata,
},
yAxis: {
type: 'value',
position: 'right',
},
series: [{
data: data1,
type: 'line',
name: 'data1',
},
{
data: data2,
type: 'line',
name: 'data2',
} ]
}
is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)
css solution is acceptable but I'm beginner in css and frontend development in general
any suggestion would be helpful, thank you
To add that vertical axis line, you can simply change to trigger: 'axis'
. Beware that position: 'top'
does not work with this option, so you would have to change it to something like this:
position: function (point) {
return [point[0], '20%'];
// if u wanna center it to the line, then u could do something like
// [point[0] - width_of_tooltip / 2, '20%']
}, ...
Regarding the down arrow, I see two options:
Change the formatter option to a function:
formatter: function (params) {
return `<div class="tooltip">${params[0]}</div>`;
}, ...
and then you can create the arrow with css, assigned to that tooltip
class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp ).
Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText
option, like this:
tooltip: {
trigger: 'axis',
extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
...
}
there you can add more css options to make it look like you want (I just chose a random bubble text box). I'd personally like the first option better. Good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.