Fundraiser Thermometer

Question

Hello, I would like help formatting the linear gauge control so it looks like a fundraising thermometer, and has a similar look to this:

Wadih · Answer

This is the attached fileAttachment: Screen_Shot_20210712_at_10.33.45_PM.png_b7bae215.zip

Indumathi Ravi · Answer

Hi Wadih, 

  
Thank you for contacting Syncfusion Support. 
  
We have analyzed your query and created a sample using the provided image. 
  
Sample Link: https://stackblitz.com/edit/react-x5t3ss-rtngpr?file=index.js 
  
Please let us know if the above sample meets your requirements. If not, please provide more details about your requirements. It will be helpful for us to analyze further and assist you better. 
  


Regards, 

Indumathi R

Wadih · Answer

Hello,

Thank you for the fast reply. This was a good start. I'd like it to look like the sample, however, I'm looking for additional functionality...

I'm looking for the color that is purple right now to be red.
I'm looking for there to be a starting value and a "goal" or maximum value displayed. Right now in the demo, it shows the starting value (0), I'd like it to specify a goal value that shows at the maximum value. For example, if the goal was $1000, the maximum value should say $1000 at the top of the thermometer.
I'm also looking for it to display and fill up to the current value. For example, if there were $257 dollars currently donated, it should say the current value off to the side adjacent to where the thermometer is filled up to.
I'm also looking for the following. Let's say the thermometer is currently at the value $257. If the value were to change to $467, I'd like there to be a smooth animation moving the "liquid" in the thermometer and the "cursor" (implemented in the last bullet point) to the new value ($467, in this example)

Please let me know if this is possible. I understand I can implement it from scratch, but I'd like to keep utilizing the amazing syncfusion components. If I was unclear with these specifications, please let me know and I'll try to be more clear. Thank you once again, you have been a great help. I'm looking forward to hearing back.

Indumathi Ravi · Answer

Hi Wadih,

Thank you for your update.

Please find the details for your queries from the below table.

Query

Details

I'm looking for the color that is purple right now to be red.

The "colorStop" property in the “linearGradient” property of pointer can be used to change the color. Please refer the below code snippet and sample link for your reference.

Code Snippet:

<PointerDirective value={80} height={25} width={35} placement="Near" offset={-44} markerType="Triangle" linearGradient={{

startValue: '0%',

endValue: '100%',

colorStop: [

{ color: '#FF0000', offset: '0%', opacity: 1 },

{ color: '#f54ea2', offset: '100%', opacity: 1 }

]

}}>

</PointerDirective>

</PointersDirective>

Sample Link - https://stackblitz.com/edit/react-x5t3ss-yj4ewt?file=index.js

I'm looking for there to be a starting value and a "goal" or maximum value displayed. Right now in the demo, it shows the starting value (0), I'd like it to specify a goal value that shows at the maximum value. For example, if the goal was $1000, the maximum value should say $1000 at the top of the thermometer

We can achieve this requirement by labels of the Linear Gauge axis. The “axisLabelRender” event will be fired when a label is rendered. Using the "axisLabelRender" event, we can customize the start and maximum values of the axis labels and hide other labels. Please find the code snippet below for your reference. Please find the sample from the last response for your reference.

Code Snippet:

onLabelRender(args) {

if (args.axis.visibleRange.min == args.value) {

args.text = '$' + args.value;

args.axis.labelStyle.font.color = 'red';

} else if (args.axis.visibleRange.max == args.value) {

args.text = '$' + args.value;

args.axis.labelStyle.font.color = 'red';

} else if (

args.axis.pointers[0].value == args.value ||

args.axis.pointers[0].value == args.value + 5

) {

args.text = '$' + args.axis.pointers[0].value;

args.axis.labelStyle.font.color = 'red';

} else {

args.text = '';

}

<LinearGaugeComponent

ref={gauge => (this.gaugeInstance = gauge)}

id="gauges"

axisLabelRender={this.onLabelRender.bind(this)}>

</LinearGaugeComponent>

I'm also looking for it to display and fill up to the current value. For example, if there were $257 dollars currently donated, it should say the current value off to the side adjacent to where the thermometer is filled up to.

Using the "axisLabelRender" event, we can also display the label for the current value of the Linear Gauge. Please find the sample link from the next response.

I'm also looking for the following. Let's say the thermometer is currently at the value $257. If the value were to change to $467, I'd like there to be a smooth animation moving the "liquid" in the thermometer and the "cursor" (implemented in the last bullet point) to the new value ($467, in this example)

Use the "animationDuration" property in the pointers to animate the pointer of the Linear Gauge.

In the below sample link, we updated the thermometer pointer value with a button click and animation is provided to it.

Sample Link - https://stackblitz.com/edit/react-x5t3ss-btg6iy?file=index.js

Please let us know if the above sample meets your requirements. If we have misunderstood your requirement, please provide us more information and we will assist you further.

Regards,

Indumathi R.

Wadih · Answer

This is exactly what I'm looking for! I'll make sure to reply to this thread if any complications occur. Thank you!

Sabari Anand Senthamarai Kannan · Answer

Hi Wadih, 

Thank you for the update. 

We are glad to know that the provided solution meets your requirements.  

Please let us know if you need any further assistance. 

Regards, Sabari Anand