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

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

• javascript
• css
• reactjs
• charts
• echarts

Share Improve this question Follow asked Sep 4, 2020 at 22:52 Dalal MansourDalal Mansour 31733 gold badges66 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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./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./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!