We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tooltip shows strange characters

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?



5 Replies

DG Durga Gopalakrishnan Syncfusion Team February 28, 2023 03:58 PM UTC

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.



DA Daniel March 1, 2023 08:21 AM UTC

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




SB Swetha Babu Syncfusion Team March 3, 2023 12:42 PM UTC

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.



DA Daniel March 3, 2023 03:55 PM UTC

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



SB Swetha Babu Syncfusion Team March 6, 2023 04:29 AM UTC

Daniel,


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


Loader.
Live Chat Icon For mobile
Up arrow icon