[LinearGauge] Unable to setAnnotationValue in Docker

[Amanda]

Hi Syncfusion Team

I created a react project with linear gauge and run as a docker image. Everytime i use setAnnotationValue method, there will be an error:

TypeError: Cannot set properties of undefined (setting 'content')

at t.setAnnotationValue (linear-gauge.js: 850)

This only happens only when is on docker.

Please assist

Regards

Amanda

[Indumathi Ravi]

Hi Amanda,

Thank you for contacting Syncfusion Support. 

  

We are unable to reproduce the reported issue with the Linear Gauge control in the React application which is run as a docker image. Please find the sample application in which we tried to reproduce the reported issue and the screen capture video of the same below. 

  

Sample Application:
https://www.syncfusion.com/downloads/support/forum/170629/ze/LinearGauge-1025007065 

  

Screen Capture Video: 

https://www.syncfusion.com/downloads/support/forum/170629/ze/lineargaugedocker-1155830959 

  

Please provide the code snippet or modify the above sample to reproduce the issue. It will be helpful for us to analyze and assist you further. 

Regards,
Indumathi R 

[Amanda]

Hi Indumathi

I try to create a sample. When click on the + sign, the same error occurred. Please refer to link below:

Sample: https://codesandbox.io/s/suspicious-http-9d77p?file=/src/App.tsx

Thanks

Regards

Amanda

[Indumathi Ravi]

Hi Amanda,

Thank you for your update. 

  

When we analyzed the provided sample link, we came to know that the Linear Gauge control is not used in the sample. So we added the Linear Gauge control in the provided sample and the issue is not reproduced. Please find the modified sample link and the screen capture video of the same below. 

  

Sample - https://codesandbox.io/s/prod-sunset-u1dn3 

  

Screen Capture (Video): https://www.syncfusion.com/downloads/support/forum/170629/ze/lineargaugecodesandbox-1980242298 

  

Please provide us the code snippet or the sample application to reproduce the reported issue. It will be helpful for us to analyze and assist you further. 

Regards, 

Indumathi R 

[Amanda]

Hi Indumathi

I didnt realize that the link i sent you is empty. I just paste the code below instead:

import "./styles.css";

import React from 'react';

import { useRef } from 'react';

import {

LinearGaugeComponent,

Inject,

Annotations,

AxesDirective,

AxisDirective,

} from '@syncfusion/ej2-react-lineargauge';

const data = [

{ content: "1" },

{ content: "2" },

{ content: "3" },

{ content: "4" },

{ content: "5" }

];

export default function App() {

const linearRef = useRef<LinearGaugeComponent | null>(null);

const toggleSet = () => {

data.forEach((item: any, index: number) => {

if(linearRef.current !== null) {

linearRef.current.setAnnotationValue(index, item.content);

}

})

};

return (

<div>

<button onClick={toggleSet}>

<span>+</span>

</button>

<LinearGaugeComponent

orientation='Horizontal'

ref={(scope) => linearRef.current = scope}

>

<Inject services={[Annotations]} />

<AxesDirective>

<AxisDirective

minorTicks={{ interval: 10, width: 1, height: 15 }}

majorTicks={{ interval: 1, width: 1, height: 35 }}

minimum={0}

maximum={10}

line={{ width: 1 }}

>

</AxisDirective>

</AxesDirective>

</LinearGaugeComponent>

</div>

)

}

When click on +, the error message will show up

Regards

Amanda

[Indumathi Ravi]

Hi Amanda, 

  

Thank you for the update. 

  

When we analyzed the provided code and we came to know that the “AnnotationDirective” is not used in the code. We need to declare "AnnotationDirective" tags to change the corresponding annotation content using "setAnnotationValue" method. Please find the code snippet. 

  

Code Snippet: 

const toggleSet = () => { 

    data.forEach((item: any, index: number) => { 

      if (linearRef.current !== null) { 

        linearRef.current.setAnnotationValue(index, item.content, index); 

      } 

    }); 

  };
<LinearGaugeComponent> 

        <Inject services={[Annotations]} /> 

        <AnnotationsDirective> 

          {data.map((item) => ( 

            <AnnotationDirective 

              content="" 

              zIndex="1" 

            ></AnnotationDirective> 

          ))} 

        </AnnotationsDirective> 

</LinearGaugeComponent> 

  

We have modified the sample to demonstrate the same and it can be found from the below link. 

https://codesandbox.io/s/pensive-panka-07csq

  

Please let us know if the above sample meets your requirement and let us know if you need any further assistance. 

  

Regards, 

Indumathi R.