Search code examples
highchartsreact-highcharts

How to get stacked doughnut chart using React Highcharts without using "highcharts-react-official" library?

I want to achieve a stacked donut chart using React Highcharts, which looks something like the attached picture. enter image description here

The 84% here resembles, the average of the number of the doughnuts in the stacked doughnut chart. I tried doing a single doughnut first, as I am new to Highcharts. But I used react-highcharts-official library, which I shouldn't use. I am attaching the code for that via stackblitz. please help me how to get this stacked doughnut using Highcharts React.

Thanks in advance.

https://stackblitz.com/edit/js-d7dzr4?file=index.js (single doughnut chart)

Solution

  • Instead of a pie chart, you can use a radial bar chart with two series and disable grouping.

      chart: {
    polar: true,
    inverted: true,
    ...
  }

    Live demo: https://jsfiddle.net/BlackLabel/3whcj902/

    Docs: https://www.highcharts.com/docs/chart-and-series-types/radial-bar-chart