display high chart pie chart on the top of the div

Question

i have the high-chart with label as shown below

how to display the chart from the top left corner

i have tried doing it as below

{
                legend: {
                    itemStyle: {
                        fontSize:'8px'
                     },
                     align: 'right',
                     layout: 'vertical',
                     verticalAlign: 'top',
                     x: this.state.legendXValue ? this.state.legendXValue  : 10,
                     y: this.state.legendYValue ? this.state.legendYValue  : 30,
                    backgroundColor: 'rgba(255,255,255,0.2)'
                }

            }

but chart is not aligning to the top left

please let know how to configure chart parts to render it from the top left i mean there is lot of space in the top left how to remove it and utilize it for the chart

Answer 1

You can position the pie chart according to your requirements by using center property:

series: [{
  center: ['30%', '40%'],
  size: '80%',
  ...
}]

---

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4812/

API Reference:

https://api.highcharts.com/highcharts/series.pie.center

https://api.highcharts.com/highcharts/series.pie.size