1. Home
  2. Forum
  3. React - EJ 2
  4. error when I use tooltip template

error when I use tooltip template

when i use tooltip template with crosshair an error occurs when the cursor exits the chart area

TypeError: Cannot read properties of undefined (reading 'propName')


import { ChartComponent, Crosshair, DateTime, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from "@syncfusion/ej2-react-charts";
import { paletColorsDashboard } from '@/global-utils/index'

interface ChartProgPenjualanUnitProps {

}

const ChartProgPenjualanUnit: React.FC<ChartProgPenjualanUnitProps> = () => {
  const john = [{ x: new Date(2000, 2, 11), y: 15 }, { x: new Date(2000, 9, 14), y: 20 },
  { x: new Date(2001, 2, 11), y: 25 }, { x: new Date(2001, 9, 16), y: 21 },
  { x: new Date(2002, 2, 7), y: 13 }, { x: new Date(2002, 9, 7), y: 18 },
  { x: new Date(2003, 2, 11), y: 24 }, { x: new Date(2003, 9, 14), y: 23 },
  { x: new Date(2004, 2, 6), y: 19 }, { x: new Date(2004, 9, 6), y: 31 },
  { x: new Date(2005, 2, 11), y: 39 }, { x: new Date(2005, 9, 11), y: 50 },
  { x: new Date(2006, 2, 11), y: 24 }];
  const andrew = [{ x: new Date(2000, 2, 11), y: 39 }, { x: new Date(2000, 9, 14), y: 30 },
  { x: new Date(2001, 2, 11), y: 28 }, { x: new Date(2001, 9, 16), y: 35 },
  { x: new Date(2002, 2, 7), y: 39 }, { x: new Date(2002, 9, 7), y: 41 },
  { x: new Date(2003, 2, 11), y: 45 }, { x: new Date(2003, 9, 14), y: 48 },
  { x: new Date(2004, 2, 6), y: 54 }, { x: new Date(2004, 9, 6), y: 55 },
  { x: new Date(2005, 2, 11), y: 57 }, { x: new Date(2005, 9, 11), y: 60 },
  { x: new Date(2006, 2, 11), y: 60 }];
    const ChartTemplate = {
      template: '<div id="Tooltip"><table style="width:100%;  border: 1px solid black;" class="table-borderless">' +
      '<tr><th rowspan="2" style="background-color: #C1272D"><img src="assets/chart/images/grain.png" />' +
       // tslint:disable-next-line:max-line-length
       '</th><td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 14px; color: #E7C554; font-weight: bold; padding-left: 5px">' +
       // tslint:disable-next-line:max-line-length
       '`${y}`</td></tr><tr ><td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 18px; color: #FFFFFF; font-weight: bold; padding-left: 5px">`${x}`</td>' +
       '</tr></table></div>'
    };

  return (
    <>
      <ChartComponent id='charts' style={{ textAlign: "center" }} width='99%'
        primaryXAxis={{
          minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
          valueType: 'DateTime',
          skeleton: 'MMM',
          lineStyle: { width: 0 },
          majorGridLines: { width: 0 },
          edgeLabelPlacement: 'Shift'
        }}
        chartArea={{ border: { width: 0 } }}
        primaryYAxis={{
          labelFormat: '{value}',
          majorTickLines: { width: 0 },
          lineStyle: { width: 0 },
          minorTickLines: { width: 0 },
          majorGridLines: { width: 1, color: '#A6A6A6', dashArray: '4,4' },
        }}
        legendSettings={{ visible: true, position: 'Top', alignment: 'Far', margin:{right:20}}}
        tooltip={{ enable: true, shared: true, template: '${x} and ${y}'}}
        isMultiSelect={true}
        palettes={paletColorsDashboard()}
        crosshair={{ enable: true, lineType: 'Vertical', verticalLineColor:'#E0E0E0', line:{width:0.5}}}>
        <Inject services={[LineSeries, DateTime, Tooltip, Crosshair, Legend]} />
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={john} xName='x' yName='y' width={2} name='John'
            type='Line' marker={{ visible: false}} legendShape='Circle'>
          </SeriesDirective>
          <SeriesDirective dataSource={andrew} xName='x' yName='y' width={2} name='Andrew'
            type='Line' marker={{ visible: false }} legendShape='Circle'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent>
    </>
  );
}

export default ChartProgPenjualanUnit;






9 Replies 1 reply marked as answer
SB Sridevi Bharathi Manohar Syncfusion Team January 12, 2022 04:20 PM UTC

Hi asep, 

Greetings from Syncfusion. 

We have ensured your reported scenario, unfortunately we are unable to replicate an issue from our end. We have attached the tested sample with tooltip template and crosshair for your reference. 

 


Since we are not aware of your exact problem. So Please share the following information which will be more helpful for further analysis and provide you the solution sooner. 

  • Try to reproduce the reported scenario in the above sample
  • Please share your sample (or) code snippet with full configurations.
  • Share the details if you have done any other customization in your sample.

Regards, 
Sridevi Bharathi. 


AS asep replied to Sridevi Bharathi Manohar January 13, 2022 02:56 AM UTC

I'm using react with next js typescript and this is the code I'm using

this my index.tsx

import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import ChartSynfusion from './chart'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<main className={styles.main}>
<ChartSynfusion/>
main>
div>
)
}

export default Home


and this chart.tsx

import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
LineSeries, DateTime, Tooltip, Crosshair, Legend
} from '@syncfusion/ej2-react-charts';


const ChartSynfusion = () => {
const john = [{ x: new Date(2000, 2, 11), y: 15 }, { x: new Date(2000, 9, 14), y: 20 },
{ x: new Date(2001, 2, 11), y: 25 }, { x: new Date(2001, 9, 16), y: 21 },
{ x: new Date(2002, 2, 7), y: 13 }, { x: new Date(2002, 9, 7), y: 18 },
{ x: new Date(2003, 2, 11), y: 24 }, { x: new Date(2003, 9, 14), y: 23 },
{ x: new Date(2004, 2, 6), y: 19 }, { x: new Date(2004, 9, 6), y: 31 },
{ x: new Date(2005, 2, 11), y: 39 }, { x: new Date(2005, 9, 11), y: 50 },
{ x: new Date(2006, 2, 11), y: 24 }];
const andrew = [{ x: new Date(2000, 2, 11), y: 39 }, { x: new Date(2000, 9, 14), y: 30 },
{ x: new Date(2001, 2, 11), y: 28 }, { x: new Date(2001, 9, 16), y: 35 },
{ x: new Date(2002, 2, 7), y: 39 }, { x: new Date(2002, 9, 7), y: 41 },
{ x: new Date(2003, 2, 11), y: 45 }, { x: new Date(2003, 9, 14), y: 48 },
{ x: new Date(2004, 2, 6), y: 54 }, { x: new Date(2004, 9, 6), y: 55 },
{ x: new Date(2005, 2, 11), y: 57 }, { x: new Date(2005, 9, 11), y: 60 },
{ x: new Date(2006, 2, 11), y: 60 }];
const thomas = [{ x: new Date(2000, 2, 11), y: 60 }, { x: new Date(2000, 9, 14), y: 55 },
{ x: new Date(2001, 2, 11), y: 48 }, { x: new Date(2001, 9, 16), y: 57 },
{ x: new Date(2002, 2, 7), y: 62 }, { x: new Date(2002, 9, 7), y: 64 },
{ x: new Date(2003, 2, 11), y: 57 }, { x: new Date(2003, 9, 14), y: 53 },
{ x: new Date(2004, 2, 6), y: 63 }, { x: new Date(2004, 9, 6), y: 50 },
{ x: new Date(2005, 2, 11), y: 66 }, { x: new Date(2005, 9, 11), y: 65 },
{ x: new Date(2006, 2, 11), y: 79 }];
const mark = [{ x: new Date(2000, 2, 11), y: 75 }, { x: new Date(2000, 9, 14), y: 75 },
{ x: new Date(2001, 2, 11), y: 68 }, { x: new Date(2001, 9, 16), y: 75 },
{ x: new Date(2002, 2, 7), y: 71 }, { x: new Date(2002, 9, 7), y: 69 },
{ x: new Date(2003, 2, 11), y: 81 }, { x: new Date(2003, 9, 14), y: 84 },
{ x: new Date(2004, 2, 6), y: 85 }, { x: new Date(2004, 9, 6), y: 87 },
{ x: new Date(2005, 2, 11), y: 75 }, { x: new Date(2005, 9, 11), y: 70 },
{ x: new Date(2006, 2, 11), y: 85 }];
const william = [{ x: new Date(2000, 2, 11), y: 85 }, { x: new Date(2000, 9, 14), y: 83 },
{ x: new Date(2001, 2, 11), y: 85 }, { x: new Date(2001, 9, 16), y: 87 },
{ x: new Date(2002, 2, 7), y: 82 }, { x: new Date(2002, 9, 7), y: 74 },
{ x: new Date(2003, 2, 11), y: 73 }, { x: new Date(2003, 9, 14), y: 75 },
{ x: new Date(2004, 2, 6), y: 73 }, { x: new Date(2004, 9, 6), y: 60 },
{ x: new Date(2005, 2, 11), y: 48 }, { x: new Date(2005, 9, 11), y: 55 },
{ x: new Date(2006, 2, 11), y: 40 }];
return (
<>
<div className='control-pane'>
<div className='control-section'>
<ChartComponent style={{ textAlign: "center" }}
primaryXAxis={{
labelStyle: {size: '10px', fontFamily:'Lato'},
minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
valueType: 'DateTime',
skeleton: 'y',
lineStyle: { width: 0 },
majorGridLines: { width: 0, color:'#E0E0E0' },
minorGridLines: {width: 0, color:'green'},
minorTicksPerInterval:1,
edgeLabelPlacement: 'Shift'
}}
chartArea={{ border: { width: 0 } }}
primaryYAxis={{
title: 'Jutaan',
labelStyle: {size: '10px', fontFamily: 'Lato'},
labelFormat: '{value}',
majorTickLines: { width: 0 },
minimum: 10, maximum: 80,
lineStyle: { width: 0 },
majorGridLines: {width: 1, dashArray: '4', color: '#E0E0E0'},
minorTicksPerInterval: 1,
}}
isMultiSelect= {true}
legendSettings={{visible:true, alignment: 'Far', position: 'Top'}}
title='Average Sales per Person'
tooltip={{ enable: true, shared: true, template:'${x}' }}
crosshair={{ enable: true, lineType: 'Vertical', verticalLineColor: '#E0E0E0', line:{width: 0.5} }}>
<Inject services={[LineSeries, DateTime, Tooltip, Crosshair, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={john} xName='x' yName='y' width={2} name='John'
type='Line' marker={{ visible: false }}>
SeriesDirective>
<SeriesDirective dataSource={andrew} xName='x' yName='y' width={2} name='Andrew'
type='Line' marker={{ visible: false }}>
SeriesDirective>
<SeriesDirective dataSource={thomas} xName='x' yName='y' width={2} name='Thomas'
type='Line' marker={{ visible: false }}>
SeriesDirective>
SeriesCollectionDirective>
ChartComponent>
div>
div>
);
}

export default ChartSynfusion;


i don't use extra configuration, and i just use default project from nextjs typescript


SB Sridevi Bharathi Manohar Syncfusion Team January 13, 2022 04:55 PM UTC

Hi Asep, 

We have analyzed your query and able to reproduce the issue. So, we have considered this as bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 25th January 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Regards, 
Sridevi Bharathi. 


Marked as answer
AS asep January 14, 2022 01:58 AM UTC

Thank you very much. 


DG Durga Gopalakrishnan Syncfusion Team January 14, 2022 06:10 AM UTC

Hi Asep,


Most welcome. We will include the fix as per mentioned timeline. We appreciate your patience until then.


Regards,

Durga G


SB Sridevi Bharathi Manohar Syncfusion Team January 25, 2022 03:27 PM UTC

Hi Asep, 
  
Thanks for being patience. We have resolved the reported issue and generated custom nugget. We request you to ensure your application by installing this custom nugget.   
  
  
This fix will be included in our upcoming weekly patch release which is scheduled to be rolled out on 1th February, 2022. We have attached the document on how to add custom nugget.  
  
  
Kindly revert us if you have any concerns.  
  
Regards, 
Sridevi Bharathi.

DA Dmitry Abramov October 13, 2022 08:37 AM UTC

Still experiencing this in React.

`"@syncfusion/ej2-react-charts": "^20.3.49"`


DG Durga Gopalakrishnan Syncfusion Team October 14, 2022 03:18 PM UTC

Hi Dmitry,


Sorry for the inconvenience caused. We will include the fix for reported issue in our weekly patch release which is scheduled to be rolled out on 25th October 2022. We appreciate your patience until then. Meanwhile, we request you to use already shared custom package to overcome the reported problem.


Please revert us if you have any concerns.


Regards,

Durga Gopalakrishnan.


DG Durga Gopalakrishnan Syncfusion Team October 28, 2022 03:25 PM UTC

Hi Dmitry,


We are glad to announce that our v20.3.52 patch release is rolled out; we have added the fix for reported issue and is available for download under the following link.


Npm Packages : https://www.npmjs.com/~syncfusionorg       


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Durga Gopalakrishnan.


Loader.
Up arrow icon