## Pie chart
* This section describes how to create pie chart with options.
* You can refer to the [Getting started](getting-started.md) for base installation of Toast UI Chart.

***

### Data type
The data type of the pie chart is simpler than the [basic data type](chart-types-bar,column.md#basic-data-type).

```javascript
var rawData = {
    series: [
        {
            name: 'Legend1',
            data: 20
        },
        {
            name: 'Legend2',
            data: 50
        },
        {
            name: 'Legend3',
            data: 60
        },
        {
            name: 'Legend4',
            data: 80
        },
        {
            name: 'Legend5',
            data: 10
        },
        {
            name: 'Legend6',
            data: 30
        }
    ]
};
```

### Creating a basic chart

##### Example

```javascript
var rawData = {
    categories: ['Browser'],
    series: [
        {
            name: 'Chrome',
            data: 46.02
        },
        //...
    ]
};
tui.chart.pieChart(container, rawData);
```
![Pie Chart](https://user-images.githubusercontent.com/35218826/36881907-21f7af84-1e14-11e8-8d50-755e5f4674d2.png)

* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic.html)_

***

### Displaying a legend label to each center of a piece in the pie graph

If you set `true` to `series.showLegend` option and set 'center' to `series.labelAlign` option, you can display a legend label to each center of a piece of the pie graph.

##### Example

```javascript
//...
var options = {
    series: {
        showLegend: true,
        labelAlign: 'center'
    },
    legend: {
        visible: false
    }
};
tui.chart.pieChart(container, rawData, options);
```
![Center Legend Pie Chart](https://user-images.githubusercontent.com/35218826/36882119-5ccf1182-1e15-11e8-9bcf-c1d30e1a8ca0.png)

* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-02-pie-chart-center-legend.html)_

***

### Displaying a legend label to outer of pie graph
If you set 'outer' to `series.labelAlign` option, you can display a legend label to outer of pie graph.

##### Example

```javascript
//...
var options = {
    series: {
        showLegend: true,
        labelAlign: 'outer'
    },
    legend: {
        visible: false
    }
};
tui.chart.pieChart(container, rawData, options);
```
![Outer Legend Pie Chart](https://user-images.githubusercontent.com/35218826/36882140-81a3815a-1e15-11e8-890a-ff89c8b70dcb.png)

* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-03-pie-chart-outer-legend.html)_

***

### Creating a donut chart

If you use `radiusRange` option, you can creating a donut chart.<br>
`radiusRange` option is an array type having a percentage value.

##### Example

```javascript
//...
var options = {
    series: {
        radiusRange: ['70%', '100%']
    }
};
tui.chart.pieChart(container, rawData, options);
```

![Donut Chart](https://user-images.githubusercontent.com/35218826/36882216-cc4f9a2c-1e15-11e8-9e25-04f351daef4e.png)


* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-04-pie-chart-donut.html)_

***

### Changing size of radius

Also, if you set only first element at `radiusRange` option, you can change size of radius for pie graph.<br>


##### Example

```javascript
//...
var options = {
    series: {
        radiusRange: ['50%']
    }
};
tui.chart.pieChart(container, rawData, options);
```

![radiusRatio option](https://user-images.githubusercontent.com/35218826/36882295-5182fca2-1e16-11e8-9724-ba94b2901d6e.png)


***

### Semi circle pie chart

If you use `startAngle`, `endAngle` options with `radiusRange` option, you can make semi circle chart.

##### Example

```javascript
var rawData = {
    categories: ['Browser'],
    series: [
        {
            name: 'Chrome',
            data: 46.02
        },
        //...
    ]
};
var options = {
    series: {
        startAngle: -90,
        endAngle: 90,
        radiusRange: ['60%', '100%']
    }
}
tui.chart.pieChart(container, rawData, options);
```

![Semi Circle Donut Chart](https://user-images.githubusercontent.com/35218826/36882331-82acfd1e-1e16-11e8-8bb6-351a91487d4e.png)

* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-05-pie-chart-semi-circle-donut.html)_