Pie Chart Basics

Visualize proportions and distributions with circular charts

Basic Pie Chart

A simple pie chart with automatic color generation:

Sales by Category

<dc-pie-chart width="600" height="400">
  <dc-title>Sales by Product Category</dc-title>
  <dc-pie-slice value="30" label="Electronics"></dc-pie-slice>
  <dc-pie-slice value="45" label="Clothing"></dc-pie-slice>
  <dc-pie-slice value="25" label="Food"></dc-pie-slice>
  <dc-pie-slice value="15" label="Books"></dc-pie-slice>
</dc-pie-chart>
Sales by Product Category

Custom Colors

Specify custom colors for each slice:

Market Share

<dc-pie-chart width="600" height="400">
  <dc-title>Market Share</dc-title>
  <dc-pie-slice value="35" label="Company A" fill="#4CAF50"></dc-pie-slice>
  <dc-pie-slice value="28" label="Company B" fill="#2196F3"></dc-pie-slice>
  <dc-pie-slice value="22" label="Company C" fill="#FF9800"></dc-pie-slice>
  <dc-pie-slice value="15" label="Others" fill="#9E9E9E"></dc-pie-slice>
</dc-pie-chart>
Market Share

Labels and Values Display

Control what information is shown on the chart:

Labels Only (No Values)

<dc-pie-chart width="600" height="400" show-value="false">
  <dc-title>Customer Satisfaction</dc-title>
  <dc-pie-slice value="50" label="Very Satisfied"></dc-pie-slice>
  <dc-pie-slice value="30" label="Satisfied"></dc-pie-slice>
  <dc-pie-slice value="15" label="Neutral"></dc-pie-slice>
  <dc-pie-slice value="5" label="Unsatisfied"></dc-pie-slice>
</dc-pie-chart>
Customer Satisfaction

Values Only (No Labels)

<dc-pie-chart width="600" height="400" show-labels="false">
  <dc-title>Revenue Distribution</dc-title>
  <dc-pie-slice value="120" label="Q1"></dc-pie-slice>
  <dc-pie-slice value="150" label="Q2"></dc-pie-slice>
  <dc-pie-slice value="180" label="Q3"></dc-pie-slice>
  <dc-pie-slice value="200" label="Q4"></dc-pie-slice>
</dc-pie-chart>
Revenue Distribution

Using Palettes

Use palette to set a color scheme for all slices:

Sequential Palette

<dc-pie-chart width="600" height="400" palette="purples">
  <dc-title>Task Breakdown</dc-title>
  <dc-pie-slice value="20" label="Planning"></dc-pie-slice>
  <dc-pie-slice value="35" label="Development"></dc-pie-slice>
  <dc-pie-slice value="25" label="Testing"></dc-pie-slice>
  <dc-pie-slice value="20" label="Deployment"></dc-pie-slice>
</dc-pie-chart>
Task Breakdown

Categorical Palette

<dc-pie-chart width="600" height="400" palette="category10"
              label-position="outside">
  <dc-title>Browser Usage</dc-title>
  <dc-pie-slice value="65" label="Chrome"></dc-pie-slice>
  <dc-pie-slice value="19" label="Safari"></dc-pie-slice>
  <dc-pie-slice value="4" label="Firefox"></dc-pie-slice>
  <dc-pie-slice value="4" label="Edge"></dc-pie-slice>
  <dc-pie-slice value="8" label="Other"></dc-pie-slice>
</dc-pie-chart>
Browser Usage