CODEWITHSUNDEEP
javascriptjqueryhighcharts
void
void

Reputation: 36703

Highcharts Variable Pie

Is there any way by which I can set z value in % relative to the radius of the pie in variable pie?

Because if I am setting z value equals to 100 for 1 pie and 10 for another pie, then the second pie is not drawn in proportion to the first on and is rendered larger then what it should be to represent 10 and 100 gap.

Highcharts.chart('container', {
  chart: {
    type: 'variablepie',
  },
  series: [{
    data: [{
      y: 505370,
      z: 10
    }, {
      y: 551500,
      z: 50
    }, {
      y: 312685,
      z: 100
    }]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>

<div id="container"></div>

The z values here are 10, 50 and 100 but in the graph radius of each arc does not represent them proportionally.

Or if there are any other properties which can be set to make it proportional?

Upvotes: 0

Views: 423

Answers (1)

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

You can use sizeBy option. More details:

This option is related to how the Z value is represented in a pie slice. The pie slice's value can be represented by the area or the radius of the slice. The default, area, corresponds best to the human perception of the size of each pie slice.

Its default value is area so you need to change it to radius:

Highcharts.chart('container', {
  chart: {
    type: 'variablepie',
  },
  series: [{
    sizeBy: 'radius',
    data: [{
      y: 505370,
      z: 10
    }, {
      y: 551500,
      z: 50
    }, {
      y: 312685,
      z: 100
    }]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>

<div id="container"></div>

Upvotes: 1

Related Questions