Search code examples
javascripthighchartsheightpie-chart

How to get diameter of inner ring in pie highchart?


I can get diameter of external ring by plotHeight but is there any way to get diameter of inner ring of pie highchart? (https://jsfiddle.net/noy986m7/23/)

enter image description here

Highcharts.chart('container', {
   chart: {
        type: 'pie',
    },
    series: [{
        innerSize: "40%",
        data: [{
            y: 70.67,
        }, {
            y: 14.77
        }]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>


Solution

  • const getInnerDiameter = (series) => {
        const r = [];
        series.forEach((item) => {
            item.data.forEach(point => {
                r.push(point.shapeArgs.innerR);
            });
        });
        return Math.min(...(r.filter(Boolean))) * 2;
    };
    
    Highcharts.chart('container', {
       chart: {
            type: 'pie',
                    events: {
                load: function () {
                   console.log("externelD: " + this.plotHeight, "innerD: " + getInnerDiameter(this.series))
                },
            },
        },
        series: [{
            innerSize: "40%",
            data: [{
                y: 70.67,
            }, {
                y: 14.77
            }]
        }]
    });
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/variable-pie.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>