LinearGauge Tooltip

Question

I am working on a tooltip with ejs lineargauge, I have checked all the attributes whether in the documentation or in the internal classes, but none of the attributes is working. I want to change the content ; text color and background color

This is the part of the HTML code:

anycomponent.component.html

<ejs-lineargauge #axesActivite (tooltipRender)='tooltipRender($event)' [allowMargin]="false"

[axes]='axesAct'[tooltip]="tooltip"

This is the part of ts file anycomponent.component.ts After export class....

tooltip: Object = {

type: ['Range'],

enable: true,

position: 'Center',

fill: '#e5bcbc',

None of the attributes is working only Range and enable are working, all the others are not working whether fill or position.

Indumathi Ravi · Answer

Hi Ahmed,

Thank you for contacting Syncfusion Support.

When we analyzed the provided code snippet and we came to know that you are trying to render tooltip for the range but the “rangeSettings” property of “tooltipSettings” is not initialized for customization. The color of the text and the fill color of the tooltip can be changed using “color” property in the “textStyle” property of “rangeSettings”. The content of the tooltip can be changed via “tooltipRender” event using the “content” event argument. Please find the code snippet for the same below.

Code Snippet:

[app.component.html]
<ejs-lineargauge

(tooltipRender)="tooltipRender($event)"

[tooltip]="tooltip">

</ejs-lineargauge>

[app.component.ts]

public tooltip: Object = {
rangeSettings: {

fill: 'skyblue',

textStyle: {

color: 'red',

},

},
};

public tooltipRender(args: ITooltipRenderEventArgs): void {

args.content = "Pointer Range text customization";

}

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

https://stackblitz.com/edit/angular-gj5ggd-63opwd?file=app.component.html

Please let us know if you need any further assistance.

Regards,

Indumathi R.