Suppress default tooltip text and display only custom tooltip

[SDesai]

I have customized the text of tooltip in barchart. The custom tooltip is displaying correctly but the default text is not getting disabled. As a result, both default text and custom text is getting displayed. How do i disable default text ?

getHoverInfo () {

const hoverInfo = timelineData.map(i => `<span className="chart-tooltip">

<span className="tooltip-value" style='font-size:15px;display:block'>${i.duration} days <br> Start time: ${moment.unix(i.startTime).format('YYYY-MM-DD h:mm:ss')} <br> End time:${moment.unix(i.endTime).format('YYYY-MM-DD h:mm:ss')}</span></span>`);

return hoverInfo;

}


const data = [{
      x:x,
      y:y,
      type: 'bar', 
      textt: this.getHoverInfo(),
      hoverInfo: 'text'
    }];

As suggested in multiple examples I have assined my custom text as text and then assigned it to hoverInfo. But even that isn’t working.

[etienne]

I’m surprised your

getHoverInfo () {

const hoverInfo = timelineData.map(i => `<span className="chart-tooltip">

<span className="tooltip-value" style='font-size:15px;display:block'>${i.duration} days <br> Start time: ${moment.unix(i.startTime).format('YYYY-MM-DD h:mm:ss')} <br> End time:${moment.unix(i.endTime).format('YYYY-MM-DD h:mm:ss')}</span></span>`);

return hoverInfo;

}

hack works at all. text is meant to be a string or an array of string, not HTML.

[SDesai]

The reason I am adding html is because I want to even customize the formatting of the tooltip. Is there any other other way of doing so ?

[SDesai]

By the way I did test it by passing array of strings.
And even then the default text is not getting disabled.

I still get both x and y values in addition to the hoverInfo text.

[SDesai]

I fixed the problem. It was not correctly displaying the text because I was using “hoverInfo” instead of “hoverinfo”.