chart types pie

Pie chart

• This section describes how to create pie chart with options.
• You can refer to the Getting started for base installation of Toast UI Chart.

---

Data type

The data type of the pie chart is simpler than the basic data type.

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

var rawData = {
    categories: ['Browser'],
    series: [
        {
            name: 'Chrome',
            data: 46.02
        },
        //...
    ]
};
tui.chart.pieChart(container, rawData);

• Sample

---

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

//...
var options = {
    series: {
        showLegend: true,
        labelAlign: 'center'
    },
    legend: {
        visible: false
    }
};
tui.chart.pieChart(container, rawData, options);

• Sample

---

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

//...
var options = {
    series: {
        showLegend: true,
        labelAlign: 'outer'
    },
    legend: {
        visible: false
    }
};
tui.chart.pieChart(container, rawData, options);

• Sample

---

Creating a donut chart

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

Example

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

• Sample

---

Changing size of radius

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

Example

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

---

Semi circle pie chart

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

Example

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);

• Sample