Pie Donut chart with different sector sizes

Question

Hi all,

I'm looking forward to create a chart like below attached. I'm googling to find out which chart have the option to create like this type of chart, no exactly similar like the text text inside each arc, but with empty.

Primarily i was looking in chartjs, since i'm new to use any chart library, i'm yet to understand the options in it, mean while if any one has suggestions, it will be help to me.

Thanks all

Answer 1

If you want to use another library d3.js. You should look into this:

https://github.com/amanjain325/angular-d3-charts/tree/master/src/app/doughnut-chart

Edit the radius value as per your requirement.

let pie = d3.layout.pie()
  .startAngle(Math.PI / 2)
  .endAngle(Math.PI * 2 + Math.PI / 2)
  .value((d) => {
    return d.value;
  }).sort(null);

let arc = d3.svg.arc()
  .outerRadius(150)
  .innerRadius(70);

let g = svg.selectAll('.arc')
  .data(pie(piedata))
  .enter().append('g')
  .attr('class', 'arc');

Answer 2

You can use ECharts. There is also a vue version for this. They have exactly this type of chart.

Another possibility would be to create a chartjs plugin for this kind of chart.