1. Home
  2. Forum
  3. Angular - EJ 2
  4. Chart Selection Tooltip

Chart Selection Tooltip

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

7 Replies
BP Baby Palanidurai Syncfusion Team March 14, 2018 05:20 AM UTC

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, 

Thanks, 
Baby. 


MA Manu March 14, 2018 10:05 AM UTC

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'.



BP Baby Palanidurai Syncfusion Team March 15, 2018 07:07 AM UTC

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, 

Kindly revert us, if you have any concerns. 

Thanks, 
Baby. 


MA Manu March 15, 2018 07:55 AM UTC

Thank you, this worked :)

BP Baby Palanidurai Syncfusion Team March 16, 2018 10:01 AM UTC

Hi Manu, 

Thanks for your update, 

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

Regards, 
baby

MA Manu March 28, 2018 11:55 AM UTC

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


BP Baby Palanidurai Syncfusion Team March 29, 2018 06:36 AM UTC

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, 


Kindly revert us, if you have any concerns. 

Thanks, 
Baby. 


Loader.
Up arrow icon