0

I am having a really hard time trying to make a doughnut chart. All the solutions out there are using libraries and I dont want to add a hefty charting library to use just one chart. Also my stack is a little complex and having issues with using libraries. So I am trying to be as lean as possible. Basically I want to create the chart shown below.

enter image description here

I want to have center text and also be able to change the doughnut data values so needs javascript. I have basically tried to do this in CSS but it fails in IE9. As I understand it I would have to use SVG for this but I am totally new to the subject so can someone tell me how I should get started? Or point me to an example?

user3312508
  • 907
  • 4
  • 10
  • 25
  • 1
    To help your search try making a pie chart and placing a circle on top in front of it. – quemeful May 17 '16 at 19:43
  • some tips here http://stackoverflow.com/questions/37206635/circle-with-three-different-border-colors – G-Cyrillus May 17 '16 at 19:43
  • See the [duplicate Q&A](http://stackoverflow.com/questions/23664633/draw-line-start-from-the-center-of-each-sector-in-donut-chart/23664955#23664955) to create a donut chart -- ignore the radial lines that were requested in the question. – markE May 17 '16 at 21:13

1 Answers1

0
Try making a pie chart first. 
Then put a white circle on top with your detials inside (total 12000 etc.)

An example of a pure CSS pie chart is here

quemeful
  • 9,542
  • 4
  • 60
  • 69