Speedometer chart

[amityweb]

Hi.

Can canvas is do speedometers? Customer has asked to change it to speedeometer for a graph of marks out of 10.
Thanks

• This topic was modified 1 year, 6 months ago by amityweb.

[Shashi Ranjan]

@amityweb,

Sorry, we don’t have a gauge chart as of now but a semi doughnut chart can be used to achieve the above requirement as shown in this JSFiddle.
____
Shashi Ranjan
Team CanvasJS

[CARLOS SOUSA]

We create an speedometer with the following link suggestion that use CanjasJS.
https://codepen.io/PowerTower/pen/GQONjy

Whats we did:
1) We Created diferentes areas but the color is the same “white”, once is our background-color:
data: [
{
type: ‘doughnut’,
dataPoints: [
{
y: 1,
color: ‘white’
},
{
y: 1,
color: ‘white’
}
,
{
y: 1,
color: ‘white’
}
]
Basicaly we use de structure of diferentes color for separate areas, However all color we use “white” that is ou background-color. So the color is never shown.

2) We removed the center informaton number.

3) We adjusted the pointer position and size.

4) We add a background-img in at the div

If you want to see the result, check the link: https://silossoft.com.br/canvasjs-gauge-speedometer.jpg

I hope this could help someone else

[sandeep]

Hi Carlos,

That’s nice work. It will definitely help many others.

Thanks for taking the efforts and posting in this community forum.

–
Sandeep
Team CanvasJS

[Author]

Posts