Unable to set custom html in 'content' property

[Eddy Mackonade]

Hi Syncfusion, I am trying to add my own html code to the  'content' property of the annotation used in LinearGaugeComponent. However, the annotation doesn't seem to render properly (I don't see item.date being display). My code is as shown below. Your help is really appreciated. Thank you.

const content = '<div class="horizontal-timeline-annotation">' + item.date + '</div>';

<AnnotationDirective
    content={content}
    axisIndex={0}
    axisValue={item.interval_value}
    x={9}
    zIndex="1"
    y={5}
    key={'cdl' + index}
/>

My package version:

"@syncfusion/ej2-base": "^19.2.55",
"@syncfusion/ej2-data": "^19.2.55",
"@syncfusion/ej2-react-buttons": "^19.2.55",
"@syncfusion/ej2-react-charts": "^19.2.55",
"@syncfusion/ej2-react-circulargauge": "^19.2.55",
"@syncfusion/ej2-react-dropdowns": "^19.2.55",
"@syncfusion/ej2-react-grids": "^19.2.55",
"@syncfusion/ej2-react-inputs": "^19.2.55",
"@syncfusion/ej2-react-layouts": "19.2.55",
"@syncfusion/ej2-react-lineargauge": "^19.2.55",
"@syncfusion/ej2-react-lists": "^19.2.55",
"@syncfusion/ej2-react-popups": "^19.2.55",
"@syncfusion/ej2-react-progressbar": "^19.2.55",
"@syncfusion/ej2-react-richtexteditor": "^19.2.59",
"@syncfusion/ej2-react-navigations": "^19.3.45",
"@syncfusion/ej2-react-splitbuttons": "^19.2.55",

[Indumathi Ravi]

Hi Eddy, 

  

Thank you for contacting Syncfusion support. 

  

We can render the HTML element in the annotation of the Linear Gauge with dynamic values by calling a method that returns the template string to the “content” property. Please find the code snippet for the same below. 

  

Code Snippet: 

var pointerArrayValues = [0, 20, 40, 50, 80]; 

var pointerValue = 

  pointerArrayValues[Math.floor(Math.random() * pointerArrayValues.length)]; 

  

annotationTemplate() { 

    return <div class="horizontal-timeline-annotation"> {pointerValue} </div>; 

  } 

template = this.annotationTemplate;
render() {

         <LinearGaugeComponent> 

              <Inject services={[Annotations]} /> 

              <AnnotationsDirective> 

                <AnnotationDirective 

                    content={this.template} 

                  axisIndex={0} 

                  axisValue={pointerValue} 

                  x={-5} 

                  zIndex="1" 

                  y={2} 

                ></AnnotationDirective> 

              </AnnotationsDirective> 

            </LinearGaugeComponent>

}); 

 

  

In the above code, "annotationTemplate" method is called in the “content” property to render the HTML template in the Linear Gauge. We have created a sample to demonstrate the same and it can be found from the below link. 

  

https://stackblitz.com/edit/react-x5t3ss-9gj7s3?file=index.js
 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R. 

[Eddy Mackonade]

Hi,

I have tried your solution but now I am getting an error:

Case.tsx:62 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I am writing a react functional component, not in class form.

Thank you

[Indumathi Ravi]

Hi Eddy, 

  

Thank you for your update. 

  

We are unable to reproduce the reported issue when the Linear Gauge is rendered in React functional component. In this application also, we can render the HTML element in the annotation of the Linear Gauge by calling a method that returns the template string to the “content” property. 

  

We have created the previously provided sample in the React functional component and recorded the screen capture video to demonstrate the same. They can be downloaded from the below link.  

  

Sample Application: https://www.syncfusion.com/downloads/support/forum/170073/ze/ReactLinearSample257460220 

Screen Capture(Video):  https://www.syncfusion.com/downloads/support/forum/170073/ze/linearsamplevideo-337517930 

  

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

Regards,
Indumathi R.