Drawing a speedometer

I am considering to use Vaadin for implementing a user interface that will contain a speedometer that will have to look according to the picture.

Is there any built-in component suitable for custom drawing and frequent redrawing of the speedometer ‘needle’ ?
Any suggestions about what is the best approach for implementing this?

Thanks !


there is a good charting library available:


It also includes a Gauge. The JS charting library used is Apache ECharts. It’s able to update the gauge on-the-fly. See:


I don’t know if thats working for SOCharts also, but you can try.

This echarts library contains a few gauge types, but it’s not what i need - which is no surprise. It’s unlikely to find an already implemented ERTMS speedometer because it’s something very specific ( the goal is to emulate the interface of a device that is normally installed in train cockpit ; the user interface is defined by some standard ).

So for me it’s clear that I have to custom draw : the yellow arc represents the max allowed speed and it has to change color (ex. red when overspeeding) and anyway the whole screen will have to contain more elements.

Did some research and so far it looks like this can be done with html-canvas or svg , animated with javascript.
I’ve found that there is at least one wrapper for svg available https://vaadin.com/directory/component/svg-component
and I’ll give it a try first. It seems promising.

I see.

You might also look into


which is a simple server side wrapper for canvas.