Customise pointer in Linear Gauge

[Eddy Mackonade]

Hi Syncfusion,

In LinearGaugeComponent, we use PointerDirective to display each data points on the component. 

Is there a way to show a customised tooltip with the PointerDirective? Enabling tooltip option in LinearGaugeComponent did not allow for customised tooltip with customised content. Any help would be deeply appreciated. Thank you.

Regards,

Eddy

[Indumathi Ravi]

Hi Eddy, 

  

Thank you for contacting Syncfusion support. 

  

By setting the HTML DOM element to the “template” property in the “tooltip” property of the Linear Gauge, we can render customized tooltip. The pointer value can be included within the template by using the placeholder text “${value}”. Please find the code snippet for setting the tooltip template below. 

  

Code Snippet: 

<LinearGaugeComponent 

              tooltip={{ 

                enable: true, 

                template: '<div style="width: 90px;background: rgba(53, 63, 76, 0.90); opacity: 90%;background: rgba(53, 63, 76, 0.90);box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);padding-bottom: 10px;padding-top: 10px;padding-left: 10px;padding-right: 10px;border: 1px #abb9c6; color:white"> pointer : ${value} <div>', 

              }} 

            > 

             <Inject services={[GaugeTooltip]} /> 

             //.. 

            </LinearGaugeComponent> 

  

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

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

  

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

  

Regards, 

Indumathi R. 

[Eddy Mackonade]

Hi  Indumathi R.,

If I do not want to use the ${value} from the pointer but rather from my own data to replace the ${value}, is it possible? Thank you.

Regards.

Eddy

[Indumathi Ravi]

Hi Eddy, 

  

Thank you for the update. 

  

We can change the content in the tooltip template using the “tooltipRender” event. The “content” property in the argument of the event is used to change the tooltip template content. Please find the code snippet for the same below. 

  

Code Snippet: 

tooltipRender(args) { 

     //.. 

      args.content = '100'; 

     //.. 

  } 

  

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

https://stackblitz.com/edit/angular-czatc9-eqvgx6?file=app.component.ts 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R. 

[Eddy Mackonade]

Ok, thank you! I will check it out!

[Indumathi Ravi]

Hi Eddy, 

Thank you for the update. 

 

Please let us know if you need any further assistance.
 

 

Regards,
Indumathi R.