Unexpected template string expression

[Fardin Fakurian]

I've got the following warning when I used the Tooltip template for showing data like -> format: '${point.tooltip} : ${point.y}'.

Warning: Unexpected template string expression  no-template-curly-in-string

How could I solve this warning?

[Dharanidharan Dharmasivam]

Hi Fardin, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. We have prepared a sample in which using the template we have displayed x and y values alone. You can customize this based on your requirement. Also we would like to let you know that, there is no property like point.tooltip. For more information on tooltip template find the help document from below. 

 

https://ej2.syncfusion.com/react/documentation/chart/tool-tip/?no-cache=1#tooltip-template  

 

With the above sample, we didn’t get any such warnings/error. If you face still any concerns, kindly revert us by replicating your scenario with the above sample or provide your sample. 

 

Thanks, 

Dharani. 

[Fardin Fakurian]

Thanks for your reply

I just did what your document says in the Tooltip mapping name part for showing more information from data source. Based on, we should have the tooltipMappingName prop in the SeriesDirective component, and set the format in the tooltip prop to {format: '${point.tooltip}'};.

I guess it related to ECMAScript 6 that allow developers to create string including variables without concatenation, but I do not know how to remove this warning. However, I could not simulate it in your sample.

[Kalaimathi Chellaiah]

Hi Fardin, 

 

We have analyzed your query. We have modified the provided sample based on your requirement. We suspect that issue has occurred if any syntax error in provided tooltip format in your sample. Also, In our sample now tooltip text is working fine as you expect. Please find below sample, 

 

Code Snippet: 

export let data1 = [ 

    { x: 1, y: 6.3, country:'value 6.3' }, 

    //other configurations here 

]; 

export let tool = { 

    enable: true, 

    format: '${point.tooltip}' 

  }; 

//other configurations here 

<SeriesCollectionDirective> 

                                <SeriesDirective dataSource={data1} xName='x' yName='y' width={2}  marker={{visible:true}}type='Line'  tooltipMappingName='country'> 

                                </SeriesDirective> 

                                

                            </SeriesCollectionDirective> 

//other configurations here 

 

Screenshot: 

 

Sample: https://stackblitz.com/edit/react-uvfkse-mu7k65?file=index.js 

 

Hope this helps. 

 

Regards,  

Kalai.