Line/StepLine Customizable tooltip

[Andrew Tarr]

Hello,

I am trying to customize tooltips for a chart, that contains several series with different dataModels, but related data. 

<div class="chart-container">

    <div class="d-flex">

        <div class="left-container">

        </div>

        <div class="right-container">

            <ejs-chart [title]='title' [primaryXAxis]='dateAxis' [primaryYAxis]='primaryYAxis' [tooltip]='tooltip'

                (load)='load($event)' [chartArea]='chartArea' [width]='width'>

                <e-series-collection>

                    <e-series [dataSource]='actualProgressLine' type='Line' xName='endDate' yName='cumulativeActualWork'

                        name='Completed' width=2 [marker]='marker'>

                    </e-series>

                    <e-series [dataSource]='sprintsData.actualWorkTrendline' type='Line' xName='eventDate' yName='work'

                        dashArray='9' name='' fill='#C8C8C8' width=2 [enableTooltip]='false'>

                    </e-series>

                    <e-series [dataSource]='sprints' type='Line' xName='endDate' yName='cumulativePlannedWork'

                        name='Ideal Burnup' fill='#FFCA3E' width=2 [enableTooltip]='false'>

                    </e-series>

                    <e-series [dataSource]='todayMarkerLine' type='Line' xName='sprintEndDate' yName='storyPoints'

                        name='Today' width=2 fill='#3297F9' [enableTooltip]='false'>

                    </e-series>

                    <e-series [dataSource]='sprintsData.plannedWorkWithEvents' type='StepLine' xName='eventDate'

                        yName='work' name='Planned' width=2 fill='#616161' [marker]='marker'>

                    </e-series>

                    <e-series [dataSource]='sprintsData.plannedWorkTrendline' type='Line' xName='eventDate' yName='work'

                        dashArray='9' name='' fill='#C8C8C8' width=2 [marker]='marker'>

                    </e-series>

                </e-series-collection>

            </ejs-chart>

        </div>

    </div>

</div>

The above show the charts i need, but i need to customize the tooltip for each series. If the tooltip is enabled, and a type='line' then the default tooltip template is ok, but it would be nice to customize the header and content with data from the datasource. If the type='StepLine' i need the header to show the 'eventLabel' of the dataSourceItem, and the content needs to read something like 'scope increased by {valueFromDataSource}'.

Note that none of these values are currently shown in the chart, but are there to provide additional details for the marker location. 

For better understanding, the tooltip for the stepLine should look something like this: 

In addition to the above, i also need the ability to know when a marker was 'clicked' by the user, with data of that marker, as that has more UI events to follow. Or when a user clicks 'view details' in the tooltip.

Is there a way to achieve this with  the ejs-chart controls? 

[Srihari Muthukaruppan]

Hi Andrew, 

  

Please find the response for chart related query. 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

  

Query #1: If the type='StepLine' i need the header to show the 'eventLabel' of the dataSourceItem, and the content needs to read something like 'scope increased by {valueFromDataSource}'. 

  

We have analyzed your query. From that, we would like to let you know that we can achieve  your requirement using  tooltipRender event of the chart. Based on your requirement we have prepared a sample for your reference. 

  

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

  

Code Snippet: 

 app.component.html: 

<ejs-chart (tooltipRender)='tooltipRender($event )' (pointClick)='pointClick($event )'></ejs-chart> 

  

 app.component.ts: 

// add additional code here 

    public tooltipRender(args: ITooltipRenderEventArgs): void { 

      if (args.series.type === 'Line') { 

        debugger; 

      }else if (args.series.type === 'StepLine') { 

        args.headerText = args.series.dataSource[0].text; 

        args.text = 'scope increased by ' + args.series.dataSource[0].y; 

        debugger; 

      } 

    }; 

Screenshot: 

 

  

Query #2: I also need the ability to know when a marker was 'clicked' by the user, with data of that marker. 

  

We have analyzed your query. From that, we would like to let you know that we can achieve  your requirement using pointClick event of the chart. Based on your requirement we have prepared a sample for your reference. 

  

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

  

Code Snippet: 

 app.component.html: 

<ejs-chart (pointClick)='pointClick($event )'></ejs-chart> 

  

 app.component.ts: 

// add additional code here 

    public pointClick(args: IPointEventArgs): void { 

      

var dataX = args.point.x; 

      var dataY = args.point.y; 

      alert(dataX +' : ' + dataY); 

    }; 

Screenshot: 

 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

  

Let us know if you need further assistance. 

  

Regards, 

Srihari M