Getting Error when custom template enabled when data is undefined/null or not available in the data source for some series items

[Leninkumar Inapanuri]

I'm using custom template to render my own ui as tooltip for chart.

tooltip is not getting displayed and throwing the below error in the console when some series items missing data for some x values

This is what tooltip.js at line no 270 has 

as the data​ is null, accessing data.point​ is throwing above error

This is how my data looks like


This is my series collection

for groupBlock and groupOverride​​, there is no data available the above shared data.
so, I'm getting above mentioned error
what should be the solution for this ?

[Leninkumar Inapanuri]

This is the tooltip object that I'm passing to the chart instance

[Swetha Babu]

Hi Lenin,

Greetings from Syncfusion.

We have created a vue application using the provided application with the latest version to replicate the reported scenario. But, we are unable to reproduce the same. You can download the attached sample for your reference.

Code Snippet:

<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :axes='axes' :tooltip='tooltip'>

        <e-series-collection>

            <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='USA'> </e-series>

            <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' name='USA'> </e-series>

            <e-series :dataSource='seriesData' type='Line' xName='x' yName='y2' name='USA'> </e-series>

            <e-series :dataSource='seriesData' type='Line' xName='x' yName='y3' name='USA'> </e-series>

        </e-series-collection>

    </ejs-chart>

Screenshot:

If the reported scenario still persists with the latest package version(v20.4.54), please modify the attached sample to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.

Regards,

Swetha

Attachment: ChartTooltip_bcb851d5.zip

[Leninkumar Inapanuri]

With the default tooltip, it's working fine. Its showing only the available values.

But with the custom template, I'm getting error.

Try checking with custom tooltip template. That too, don't check template as plain string, try checking a component as a custom template.

[Swetha Babu]

Lenin,

We have created a vue application by adding the tooltip template as a table element in the chart to replicate the reported scenario. But, we are unable to replicate the reported scenario. The tested sample can be downloaded from the attached sample. Please find the below code snippet and screenshot of the sample for your reference.

Code Snippet:

var TemplateVue = Vue.component('contentTemplate', {

        template: `<div>

                   <table style="width:100%;  border: 1px solid black;">

                   <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>

                    <tr><td bgcolor="#00FFFF">{{data.x}}:</td><td bgcolor="#00FFFF">{{data.y}}</td></tr>

                   </table></div> `,

        data() {

            return {

                data: {}

            };

        }

    });

 

    let contentTemplate = function() {

  return { template: TemplateVue };

};

 

tooltip: { enable: true,  template: contentTemplate },

   

Screenshot:

If the reported scenario still persists, please modify the above sample to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.

[Leninkumar Inapanuri]

In your scenario, there is data in all series for all x values.

In my case, for some x values, some series doesn't have entries.

I'm getting error in that case. And my tooltip is a shared tooltip, not individual tooltip

[Durga Gopalakrishnan]

Hi Leninkumar,

              

We have created a Vue application by adding the tooltip template as a table element and setting some x values as null and series without entries in the chart to replicate the reported scenario. Unfortunately, we are unable to replicate the reported issue. The tested sample can be downloaded from the attached sample. 

UG: https://ej2.syncfusion.com/vue/documentation/chart/tool-tip

If you are still facing problem, please try to replicate an issue in attached sample or share us issue reproduced sample so that it will be helpful to validate this case further. Kindly revert us if you have any concerns.

Regard,

Nishanthi

[Leninkumar Inapanuri]

Hi,

Missed values are not from x axis.

In my data, values are missing in y axis. for some x value, some y values are not available/null/undefined

Please try checking that.

Thanks

[Durga Gopalakrishnan]

Hi Leninkumar,

We have ensured your reported scenario by setting y values as null in the chart. Chart tooltip template is displayed properly without any exception. The tested sample can be downloaded from the attached sample. Please find the below code snippet and screenshot of the sample for your reference.

UG: https://ej2.syncfusion.com/vue/documentation/chart/tool-tip

If you are still facing problem, please try to replicate an issue in attached sample or share us issue reproduced sample so that it will be helpful to validate this case further. Kindly revert us if you have any concerns.

Regards,

Nishanthi.

Attachment: ChartTooltipCustomTemplate_6834795f.zip