custom tooltip

[Kalyan Kumar]

what I need is to display "y value" for both series1 and series2 in the same tooltip. is it possible

[Srihari Muthukaruppan]

Hi Kalyan, 

 

Thanks for contacting syncfusion support. 

 

We have analysed your query. From that, we would like to let you know that we can achieve your requirement by setting the shared property as true in the tooltip of the chart. We have also prepared a sample for your reference. Please find the below code snippet and screenshot. 

  

Sample: https://stackblitz.com/edit/angular-sspcw5?file=app.component.ts 

  

Code Snippet: 

App.component.html: 

<ejs-chart style='display:block' align='center'  [tooltip]='tooltip' > 

       <e-series-collection> 

                // add your additional code snippet here 

       </e-series-collection> 

</ejs-chart> 

 

App.component.ts: 

// add your additional code snippet here 

    public tooltip: Object = { 

        enable: true, 

        shared: true 

    }; 

  

Screenshot: 

    

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Kalyan Kumar]

is it possible to show both series in custom tooltip template and also in tooltip i can add the both series values, because of using shared: true there is a way to custom template in tooltip 

[Srihari Muthukaruppan]

Hi Kalyan, 

 

We have analysed your query. From that, we would like to let you know that as of now we don’t have direct support to share both values in tooltip template. But we can customize the tooltip template by using tooltipRender event in the chart to achieve your requirement. We have also prepared a sample for your reference. Please find the below sample, code snippet and screenshot  

  

Sample: https://stackblitz.com/edit/angular-sux6yh-8qu5eb?file=app.component.ts 

  

Code Snippet:  

// add your additional code snippet here  

App.component.html: 

 

<div class="control-section"> 

    <div align='center'> 

        <ejs-chart #chart style='display:block' align='center' id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' (tooltipRender) = 'tooltipRender($event)'  [tooltip]='tooltip' (load)='load($event)' [chartArea]='chartArea' [width]='width'> 

            <e-series-collection> 

                <e-series [dataSource]='data' type='Line' xName='x' yName='y' width=2 [marker]='marker'> </e-series> 

                <e-series [dataSource]='data1' type='Line' xName='x' yName='y' width=2 [marker]='marker'> </e-series> 

            </e-series-collection> 

        </ejs-chart> 

    </div> 

</div> 

 

App.component.ts: 

 

@ViewChild('chart') 

private chart: ChartComponent; 

public tooltip: Object = { 

        enable: true, 

        template: '<div id="wrap"></div>' 

}; 

 

// add your additional code snippet here  

 

public tooltipRender(args : ITooltipRenderEventArgs ): void { 

      args.template = 

           '<div id="wrap"><table style="width:100%;  border: 1px solid black;" class="table-borderless">' + 

                    '<tr><td style="height: 25px; width: 100px; background-color: #C1272D; font-size: 12px; color: #E7C554; font-weight: bold; padding-left: 5px"><div>Series1 yValue: <b>'+ this.chart.series[0].dataSource[args.data.pointIndex].y + '</b></div></td></tr>' + 

                    '<tr><td style="height: 25px; width: 100px; background-color: #C1272D; font-size: 12px; color: #FFFFFF; font-weight: bold; padding-left: 5px"><div>Series2 yValue: <b>'+ this.chart.series[1].dataSource[args.data.pointIndex].y + '</b></div></td></tr></table></div>' 

    }; 

// add your additional code snippet here  

  

  

Screenshot:  

 

   

Let us know if you need further assistance on this. 

 

Regards, 

Srihari M