It is necessary to display a diagram of the following form: enter image description here

Made on highcharts, but did not find information how to do:

  1. Interest inside the sector. You can format the label, but it is already busy displaying Good / Bad and so on.
  2. Increase the size of the sector, you can only move it slightly by the property sliced

If you can do something similar to something else, or a cunning artisanal way - share, please.

  • It is possible on the same d3.js, and for the cunning artisanal method your code is needed in order to advise something. - edem
  • @edem I'm still looking for how to do it yourself. How come - lay out necessarily - Skywave

1 answer 1

I know that this is not a solution, but as an option, it is easier for static diagrams and you can display any structure

* { margin: 0; } .di { width: 500px; height: 500px; margin: auto; border: 20px solid transparent; border-radius: 100%; position: relative; } .di div { width: 500px; height: 500px; margin: auto; border-radius: 100%; border: 20px solid transparent; position: absolute; top: 0; left: 0; } .di .left { border-left: 20px solid red; transform: rotate(30deg); } .di .top { top: 0; border-top: 20px solid blue; border-right: 20px solid blue; transform: rotate(30deg); } .di .bootom { border-bottom: 20px solid #cc0000; border-left: 20px solid #cc0000; } 
 <div class="di"> <div class="left"></div> <div class="top"></div> <div class="right"></div> <div class="bootom"></div> </div>

http://codepen.io/Geyan/pen/ORrLry?editors=110

  • I really liked it =) I will try to do it like this - Skywave