Question 261576 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

    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>


  2. 0

    If you are using innerSize with percentage you can approximate the diameter with chart.plotHeight * (innerSize / 100) where e.g. innerSize = 40.

    For example (see this JSFiddle demonstration):

    const innerSize = 40

Highcharts.chart('container', {
  chart: {
    type: 'pie',
  },
  series: [{
    innerSize: `${innerSize}%`,
    data: [70.67,14.77]
  }]
}, function(chart) {
  const diameter = chart.plotHeight * (innerSize / 100)
  const radius = diameter / 2

  const center = chart.series[0].center
  const centerCircle = [
    center[0] + chart.plotLeft,
    center[1] + chart.plotTop,
    radius
  ]

  const circle = chart.renderer.circle(...centerCircle)
    .attr({
      fill: 'rgba(255,0,0,0.4)',
      zIndex: 3
    })
    .on('mouseover', function() {
      circle.attr('fill', 'rgba(255,0,0,0.0');
    })
    .on('mouseout', function() {
      circle.attr('fill', 'rgba(255,0,0,0.4');
    })
    .add();
});

    As you can see from the fiddle there appears to be a very minor overlap. I’m unsure of the source of this overlap, but the approximation is quite good.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search