Pie Chart

Introduction

A pie chart is a circular statistical chart that divides a circle into several sector areas to show the proportional relationship of each part of data in the whole. The central angle and area of each sector are proportional to the proportion of that part of data, intuitively presenting the relationship between "whole and parts".

Code Examples

For more examples, see Pie Chart

Basic Usage

Adjust Label Position

Custom Label

Implemented through label.render.

Adjust Inner Radius

Set Drawing Area

Image Fill

Configuration

Common properties reference: Common Configuration

Overview

Configuration	Description	Type	Default
data	Data	Array	[]
angleField	Angle mapping field	string	-
colorField	Color mapping channel, see color	string (optional)	-
radius	Radius	number[0~1]	-
innerRadius	Inner radius	number[0~1]	0
startAngle	Start angle	number	-
endAngle	End angle	number	-
title	Used to specify chart title content, see Title	object (optional)	-
legend	Auxiliary element of the chart, uses color, size, shape to distinguish different data types, used for filtering data in the chart, see Legend	object (optional)	-
label	Data labels are one of the means to add annotations to the chart, see Label	object (optional)	-
tooltip	Used to dynamically display detailed information of data points, see Tooltip	object (optional)	-
style	Visual style, configuration details see Drawing Properties	object (optional)	-
theme	Used to control the overall appearance of the chart, including visual properties such as colors, fonts, margins, see Theme	string \| object (optional)	`light`
onReady	Chart load callback, used for subsequent event binding	Function (optional)	-
scale	Maps abstract data to visual data, see Scale	object (optional)	-
animate	Animation as an important part of visualization can significantly improve the expressiveness of data visualization, see Animation	object (optional)	-
interaction	Provides the ability to explore data on demand, see Interaction	object (optional)	-
state	Implements interaction feedback, highlighting, selection and other effects, see State, chart styles under different interactions	object (optional)	-
annotations	View is like a drawing board, `Column` component draws a pie chart on it by default, we can overlay more layers on it through annotations, see Annotations	Array (optional)	-

Events

See Options - Events.

Methods

See Chart Overview - Chart Methods.

FAQ

How to avoid label overlapping

Adjust through label.transform, for more details see LabelTransform

label: {
  text: (d) => `${d.type}\n ${d.value}`,
  position: 'spider',
  transform: [
    {
      type: 'overlapDodgeY'
    }
  ]
},