Draggable Piechart JS class

For a recent project I made a draggable piechart. I thought this might be useful, so I have made it open source for others to use: https://github.com/jamesalvarez/draggable-piechart

Here is the default example:

Your browser is too old!

The default behaviour gives each slice a minimum width. You can change colours and set it to allow collapsing pies:

Your browser is too old!

However you need to provide a way to uncollapse the segments, as below. You can also override the drawing routines, providing your own format arguments for each segment, and create a UI for it to interact with:

Your browser is too old!


  1. Jeff

    This is just brilliant! Thank you.

    Is there some way to save and reload charts (rather than starting with a randomized chart every time)?

  2. Akshaya Kumar S J

    Hi James, Really excellent. Now I also need this type of pie-chart with some changes.
    1. Every section color should be different as shown here in 1st example. But the dragging functionalities should work exactly like as you shown in last example.
    2. Instead of showing the percentage value in table, I want to show it in Progress-bar. Every section will have individual bars and it’ll hold the value made in pie-chart.
    3. Plus and Minus buttons have to be beside of the progressive every bars and should work as it is in your last example here.

    I have tried a lot, eventhough I don’t know JS. I asked many people, but everyone got confused. I am using your code only, so, I think you are the right person to help me to get it done. Please help me!
    Here is my code link:

Leave a Reply

Your email address will not be published. Required fields are marked *