Custom Tooltip for Radar Chart[Feature]

[MNHarshitha]

What problem does this feature solve?

Hi,

We have a requirement of showing tooltips for the radar chart. The tooltip should consist of the data value and the corresponding indicator. https://echarts.apache.org/examples/en/editor.html?c=radar

What does the proposed API look like?

Some information in tooltip callback params using which we can construct the tooltip display labels in the following way indicaterName: dataValue

[ZeekoZhu]

@MNHarshitha you can use the tooltip option, it works with radar charts.

https://echarts.apache.org/en/option.html#tooltip

[nlpsl202]

how to show only one point's tooltip that close to mouse? It always show every point, I just want show one that my mouse close to

[MNHarshitha]

@MNHarshitha you can use the tooltip option, it works with radar charts.

https://echarts.apache.org/en/option.html#tooltip

We are able to display the tooltip using the tooltip option, but we need to modify the content of the tooltip. With reference to the above screenshot, if we are hovering on the data point of the market, we only want to display the market-related info in the tooltip. But nowhere in the formatter callback params, we are able to identify the exact data point on which the user hovered. https://codepen.io/Harshitha19/pen/eYMVXqo Please let us know the way to achieve the mentioned functionality.

[ZeekoZhu]

Maybe this issue is related to https://github.com/apache/echarts/issues/10537#issuecomment-608339356

[MNHarshitha]

Maybe this issue is related to #10537 (comment)

According to my understanding in the above ticket 10537, axisPointer option is being requested. We are trying to configure the tooltip on the item. To be more precise, when tooltip is configured for line series with the trigger on item, info related to only that data point is being displayed. When we try to configure the same i.e tooltip with the trigger on item in case of radar chart, info related to all the data points is being displayed in the tooltip. We are requesting a similar behavior as that of the line chart. Please let me know if it is not clear.

[AnthonyTannous]

any updates?

[AnthonyTannous]

I made this solution to show the hovered indicator alone using costumed JS functions for radar echarts

1. Create two global variables : var globalIndicators = new Array() var globalIndexId;

2. initialize your chart with SVGs var echartBar = echarts.init(document.getElementById('RadarChart'),{ renderer: 'svg' });

3. save your indices in the global variable globalIndicators = indices;

4. add this two functions to your page

function setIndicatorEvent() { var tags = $('#RadarChart path[transform]') for (var i = 0; i < tags.length; i++) { if (tags[i].attributes?.transform.value.includes("matrix")) tags[i].addEventListener('mouseover', (event) => customEvent(event)); } }

function customEvent(event) { var tags = $('#RadarChart path[transform]') for (var i = 0; i < tags.length; i++) { if (tags[i] == event.currentTarget) globalIndexId = i } }

5. Inside your formatter add:

var options = { tooltip: { formatter: (params) => { if (globalndexId === undefined) return var value = params.value[globalIndexId] return params.marker + " " + globalIndicators [globalIndexId].text + " " + (Number.isInteger(value) ? value : parseFloat(value).toFixed(2)) } },

6. Init this funtion setIndicatorEvent() after rendering the chart:

   options && echartBar.setOption(options, true); echartBar.hideLoading() setIndicatorEvent()

7. try it

[sedatbasar]

Having same issue would be good to have this