Skip to Content

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


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Former Member


    Excelent component. Can you please provide us gauge with two needles please.

    i have a requriment to show actual and budget value.

    1. Former Member

      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.



Leave a Reply