Tooltip shows strange characters

[Daniel]

Hi,

I am using ej2.min.js version 20.4.48 (also verified with earlier versions) and when I create a simple ej.charts.Chart (StackedColumns) and enable the tooltip, it all works. As soon as the tooltip text includes the character ':', the tooltip shows strange characters instead.

The tooltip is initiated like this:

tooltip: {

enable: true,

},

Text was: 'Test a':

Text was: 'Test a:'

Would you have any pointers on what the problem could be ?

Thank you very much,

Daniel

p.s. If I use a template for the tooltip, the ":" character is shown normally:

tooltip: {

enable: true,

template: "<div id='templateWrap' style='background-color:#3fb660;border-radius: 3px; float: right;padding: 2px;line-height: 20px;text-align: center;'>" +

"<div style='color:white; font-family:--bs-font-sans-serif; font-style: medium; fontp-size:14px;float: right;padding: 2px;line-height: 20px;text-align: center;padding-right:6px'><span>${x}</span>: <span>${y}</span></div></div>"

},

I would prefer to use a template for the tooltip, but I believe the only datapoints I can show are ${x} and ${y}. I would need to show the name of the series as well (in the top picture 'Critical'). Is this correct?

[Durga Gopalakrishnan]

Hi Daniel,

Greetings from Syncfusion.

We have ensured your reported scenario in latest version; chart series tooltip is displayed properly without any extra characters. We have attached the tested sample and screenshot for your reference.

Sample : https://stackblitz.com/edit/7jdsjz

If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample to validate this case further from our end. Kindly revert us if you have any other concerns.

Regards,

Durga Gopalakrishnan.

[Daniel]

Hi Durga,

thank you for your response.

I can confirm that your example also works on our side. The problem seems to arise when I download https://cdn.syncfusion.com/ej2/20.3.47/dist/ej2.min.js  and reference it like this:

<script src="./js/ej2.min.js" type="text/javascript"></script>

(the use case I have is that the browser cannot connect to the internet, therefore I have to download the ej2.)

Would you know a way around this problem of those strange characters when using ej2 mins from a local source?

And as a second question, I would prefer to use a template for the tooltip, but I believe the only datapoints I can show are ${x} and ${y}. As I have a 'StackingColumn' chart, I would need to show the name of the series as well . Is this possible?

Thank you,

Daniel

[Swetha Babu]

Daniel,

We have created a Javascript application using the downloaded min file to replicate the reported scenario. But we are unable to replicate the reported scenario. Please find the tested sample from the attached file for your reference. We can add the property to the dataSource and set the name to be shown in the tooltip, add that property name to the tooltipMappingName property in the series, then add the ${tooltip} to show the tooltip.

Code Snippet:

{

              type: 'StackingColumn',

              dataSource: [

                { x: '2013', y: '9628912', text: 'General Motors' },

                { x: '2014', y: '9609326', text: 'General Motors' },

                { x: '2015', y: '7485587', text: 'General Motors' },

                { x: '2016', y: '7793066', text: 'General Motors' },

                { x: '2017', y: '6856880', text: 'General Motors' },

              ],

              xName: 'x',

              width: 2,

             tooltipMappingName: 'text',

              yName: 'y',

              name: 'General Motors',

              columnWidth: 0.6,

              border: { width: 1, color: 'white' },

            },

 

tooltip: {

            enable: true,

                                           template: "<div>Year: ${x}</div><div>Value: ${y}</div><div>Series Name: ${tooltip}</div>"

        },

Screenshot:

Kindly, revert us if you have any concerns.

[Daniel]

Hi Swetha,

thank you for your response.

After your confirmation of a local ej.min.js working, I tested it more and found that if I copy-paste the content from https://cdn.syncfusion.com/ej2/20.3.47/dist/ej2.min.js  into a local ej2.min.js file, I get those strange characters. But if I use 'save page as' it works fine. Unsure why this is the case, but happy to get the local version working with your help.

The 'tooltip' addition also works great, thank you !

Happy for you to close this ticket.

Have a great weekend,

Daniel

[Swetha Babu]

Daniel,

Please get back to us if you need any further assistance.