Skip to Content

Design Studio 1.2 SDK – Creating a custom donut component

While this is not the first component I have created it’s proving to be a versatile component that I wanted to share with the community.  If you’re using Design Studio 1.3 you now have the ability to use and configure a donut component but for those of us stuck with 1.2 the only option is developing in the SDK.

This particular component took under two days to build, with the bulk of that time spent on the finer details such as positioning the text, sizing the arrow, ….  It’s fully configurable for its intended use but additional settings could easily be added if required (ie. text color, “donut-hole” color, shadow, etc…):

Design Studio SDK - donut img1.JPG

Figure 1

As I do with components where it makes sense I also added the following three events:  On Click, On Mouse Over and On Mouse Out:

Design Studio SDK - donut img2.JPG

Figure 2

Linking a donut component to a detailed WebI is simply a matter of adding code to the On Click event, for example.

The display of both the arrow and the “From” value below the donut are triggered by setting the Previous Value.  With a value of “-1” neither are displayed; anything other than will cause both to appear.  It’s important to note no data validation is done as I’ve assumed the dashboard developer will set reasonable percentage values.  The donut will not break if, for example, a value of 200 is used but it will display no differently from using 100.

While the logic to determine the arrow direction and color is not handled within the component it could easily be accomplished.  As it is a developer explicitly sets both the color and direction of the arrow (see Figures 3 & 4 below):

Design Studio SDK - donut img3.JPG

Figure 3

Design Studio SDK - donut img4.JPG

Figure 4

The code is quite simple and I have uploaded the two base files here:

Having not yet seen the donut in DS 1.3 I would be very curious to know how it compares.  I welcome any feedback you may have.

You must be Logged on to comment or reply to a post.
      • Hey, David - Great post, surprised I missed it until recently!  I think this is a great, clean example of how to use the HTML canvas component.

        Would you be interested in participating in SCN Design Studio SDK Development Community project?  If you do not have the interest or time, would you be willing to allow us to at least publish your source code in our repository to be made available for others?

        • Hi Michael, thanks for the positive feedback!  You've posted some terrific articles on the Design Studio SDK that I've read over the last year.

          Yes, I would be interested in being a part of your new project, time-dependent of course.  I think that's a great idea to publish this source code to the new repository.  I just remembered I still need to upload the missing .ztl file for it to be complete.  I'll get that done between tonight and the weekend and let you know.


          • Hi David,

            Thank you for sharing your work with the community, unfortunately I am not being able to successfully install your donut component. Maybe this is not the correct place to post that kind of a content but I couldn't find any solution over the community.

            I am working with Design Studio 1.5 and facing the following error when I am trying to install the component under Tools -> Install Extensions to Design Studio and

            1) selecting the zip file.

            Failed to discover all connectors.

            RepositoryDiscoveryStrategy failed with an error

            Failed to process repository contents

            No repository found at jar:file:/C:/Users/hypadmin/Desktop/05%20SDK%20Components/02%20Community/!/.

            2) entering the URL as davelr/Design-Studio-SDK-Custom-Donut · GitHub

            Failed to discover all connectors.

            RepositoryDiscoveryStrategy failed with an error

            Failed to process repository contents

            Unable to read repository at

   PKIX path building failed: unable to find valid certification path to requested target

            I guess that the donut component is not compatible with the DS 1.5 however if it is compatible do you or does anyone has any kind of workaround about the problem I have?



  • Hi David - Thanks for sharing it. I have tried downloading the .zip file and tried installing it. It is not working. Can you confirm the latest file is placed / the working version is available.?

  • Hi David,-This chart looks amazing. I would like to use it in my application. Request you to please specify from where I can download latest working version. Thanks!

  • Hello David , I am unable to convert the given source code into Deployable feature. I am using DS 1.6 . Its throwing Export Error at final export.

    Please Advise.



  • Hello David,

    I hope you doing good. I have integrated your code into the scn repository, so now your donut component is available there as well (in release 3.0). with the integration, the corresponding ZTL script is generated from the spec and APS is available as well.

    For those, who want to use it, you can install it with the SCN repository 3.0.

    Component List 3.0 - SCN Design Studio Community


  • Hi,

    Experts i was developing donut with data binding but i was lagging there can you please give me valuable suggestions.

    Thank You,

    Pavan Kumar

  • Hello All,

    I'm working with this component, and I couldn't get to change the font style on the value, has anyone done it yet?

    • Hello Rafael,

      I have faced the same problem with font style, in my scenario i am doing a data binding for current value as float and previous value as float....I am getting a very high font number in the middle of the donut overallping the text. Then i have followed this work around to ensure no overlapping text is visible in the donut.

      1.My donut height and width is 250.

      2.then i have dragged and dropped text box and applied below css to convert it to circle and to fill the circle with white back ground. if you want to change the radius of the circle the you can change border radius, height and width as per your requirement.

      border: 1px solid white;
      border-radius: 136px;

      3.Then Cover the donut center section with white back ground circle from step 2.

      4. Now you can drag one more text box and assign data binding property to display the value where you can format as per your wish.

      5.Incase if your values are more than four digits the you can go to 'formatter function' in the current value as float section and apply below logic where you can avoid text overflow scenario.

      if (value < 1000)

      return Convert.floatToString(value,"0");

      if (value >= 1000)

      return Convert.floatToString(value/10,"0");


      Hope this helps, let me know if you need more help on this topic.




  • Hi David,

    Thanks for your blog.
    Question if we create SDK component, can these component be used with the new desing studio release ?


  • Hi David,

    Very nice post...Just a question, any idea how to format the values in the middle of the donut value?...current value as float value should appear smaller in the middle of the donut...Hence i am using data binding for specific key figure