Skip to Content

Design Studio 1.3 SDK – Custom Gauge with Code

Hi there!

I approached to design studio 3 weeks ago and i started developing some custom components.

My first work is based on this blog post:

Design Studio 1.3 SDK – Creating a custom gauge component 

by Nicholas Stein

Following his design i wrote my code with some changes/perks.

The component is completely scalable and customizable.

You can choose:

  • Main Color.
  • Tick and text color.
  • Needle Color.
  • Color and scale(and if gradient).
  • If you want numbers and the start and end.
  • Title and showed value in the middle.

I added an animation on the needle, and a method that you can call from DS for moving it.

That is the base version and the properties page.

baseExample.png /wp-content/uploads/2014/07/properties_502109.png

And these are some custom versions:


Here the GitHub Repository:

Antoninjo/DesignStudioCustomGauge · GitHub

I’m sorry for my really chaotic code and my multilanguage comments, i will fix it soon.

I hope it could be usefull.

For any problem or suggestion please write a comment below and i will solve it as soon as possible.

Best Regards


You must be Logged on to comment or reply to a post.
    • Hey Elisabeth, you are on the right track (I assume), with the very minimal time I have spent on this component I used the same function to grab a specific measure from my Datasource (to a filter) but when the filter is applied the speedometer starts to spin (360 constantly).

      Was wondering if you were experiencing anything similar or you have managed to use it as intended.