Chart Selection Tooltip

[Manu]

Hello,

For the chart selection mode, is it possible to activate tooltip only for the series which is selected.

Is it possible to deactivate the tooltip for the unselected series.

https://plnkr.co/edit/UPutfvIeWLhSOJmwRaEO?p=preview

[Baby Palanidurai]

Hi Manu, 

Thanks for using Syncfusion products, 

We have analyzed your query. We can able to achieve your requirement using “tooltipRender” event. In this event you can cancel the tooltip for unselected series. 

Please find the below code snippet to achieve this requirement. 

public tooltipRender(args: ITooltipRenderEventArgs): void { 

       if(args.series.seriesElement.classList[0] === 'container_ej2_deselected') { 

                        args.cancel = true 

       } 

}; 

Screenshot: 

   

We have prepared a sample based on this. Please find the sample from below link, 

http://plnkr.co/edit/CnDzDIsi93NGg0U5ogpC?p=preview 

Thanks, 

Baby. 

[Manu]

Thank you, it works :)

But I've a new problem now, in the terminal I'm getting the below error

error TS2339: Property 'seriesElement' does not exist on type 'Series | AccumulationSeries'.

Property 'seriesElement' does not exist on type 'AccumulationSeries'.

[Baby Palanidurai]

Hi Manu, 

Thanks for your revert. We have analyzed your reported query and we like to inform you that, 

`seriesElement` property is applicable only in chart series alone. So, while accessing chart series property in event(`tooltipRender`) we need to typecast the `Series` type. 

Please find the below code snippet to resolve that error, 

import { Series } from '@syncfusion/ej2-ng-charts'; 

public tooltipRender(args: ITooltipRenderEventArgs): void { 

       let series: Series = <Series>(args.series); 

       args.cancel = (series.seriesElement.classList[0] === 'container_ej2_deselected'); 

}; 

Sample for your reference can be find  from below link, 

http://plnkr.co/edit/CnDzDIsi93NGg0U5ogpC?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby. 

[Manu]

Thank you, this worked :)

[Baby Palanidurai]

Hi Manu, 

Thanks for your update, 

Please let us know if you need any further assistance on this. 

Regards, 

baby

[Manu]

Hello, 

Is it possible to customize the tooltip of a chart to include the mean/average of a series or any other data 

https://plnkr.co/edit/DUkHpLWT7WcXPVGn4hxX?p=preview

[Baby Palanidurai]

Hi Manu, 

We have analyzed your query. We can achieve your requirement by using tooltipRender event. In that event, we can change the tooltip text before rendering. In this example, we have calculated sum of overall series points and percentage of each points and showed it into the tooltip. Please find the code snippet below to achieve this requirement. You can change the below code based on your requirement. 

public tooltipRender(args: ITooltipRenderEventArgs): void { 

       let series: Series = <Series>(args.series); 

       let sumvalue = this.sum(series.yData) 

       let percentage = Math.floor((args.point.y * 100) / sumvalue); 

       args.text = args.text.replace(/<b>[\s\S]*?<\/b>/, '<b>' +percentage + '% of '+ sumvalue + '</b>'); 

        

    }; 

public sum(values: number[]): number { 

      let sum: number = 0; 

     for (let value of values) { 

        sum += value; 

      } 

      return sum; 

    } 

Screenshot: 

 

Sample for your reference can be find from below link, 

http://plnkr.co/edit/otzr6z3wAjzQOHa78H03?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby.