> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/chartjs-for-confluence/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/chartjs-for-confluence/chart-types/pie-chart.md).
# Pie Chart
## Screenshot
## Description
The Chart.js Pie Chart macro can show several data sets. Each value is shown as a slice with a different color. You can select whether to show the chart as a pie or a doughnut.
## Adding the Macro
1. Edit your page.
2. Select “+” => Other macros
3. Type in “Chart.js” in the Search box
4. Select the “Chart.js Pie Chart” macro
5. Enter and select the options of the macro
6. Click Insert
7. Put your data table in the macro body
8. Save the page
## Macro Options
| Option | Description |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Chart ID** | Enter a unique identifier for this chart on your page. If you use more than one Chart.js chart on your page, make sure that each one of them has a different Chart ID. Use no blanks or special characters. |
| **Show Title** | Switch on or off the display of the chart title. If switched on (default), the title is shown above the chart’s matrix as shown in the screenshot above: “My Chart.js Bubble Chart”. |
| **Chart Title** | Enter the title of the chart. You can chose to display it or not by the “Show Title” checkbox. |
| **Chart Width** | This value defines the width of the chart block. The chart itself will adjust to this size. You can enter a pixel (e.g. “500px”) or a percentage (e.g. “100%”) value. A pixel value will make the block exactly that size, a percentage value refers to the parent block, e.g. a Confluence page section. The default is “500px”. Enter the value without the quotes. |
| **Chart Border Width** | The chart can have a border if you want so. Enter the size of it here in pixel. Enter just the number without the “px”, e.g. “1”. The default is “1”. Enter the value without the quotes. |
| **Chart Border Color** | If you chose to display a border around the chart, you can enter the color of it here. Enter the hex value of the color starting with a “#”, e.g. “#d7d7d7”. Enter the value without the quotes. |
| **Show as Doughnut** | Check this option to show the chart as a doughnut. |
| **Aspect Ratio** | With this option switched on, you can force the height to be the same as the width of the chart (square display). |
| **Show Legend** | Select whether you want to show the legend or not. |
| **Legend Position** | Select where to show the legend. |
| **Show Tooltips** | Select whether you want to show the tooltips when hovering a bubble or not. |
| **Show Data Table** | Select whether you want to show the data table of the macro body in the page view or not. |
## Data Table
The macro requires a table with your data in the macro body.
### Format
| Series | \ | \ | \ | \ | … |
| ------- | ---------------- | ---------------- | ---------------- | ---------------- | - |
| Color | Color of slice 1 | Color of slice 2 | Color of slice 3 | Color of slice 4 | … |
| Series1 | Value of slice 1 | Value of slice 2 | Value of slice 3 | Value of slice 4 | … |
| … | | | | | |
### Example
| Series | Apples | Bananas | Mangos | Oranges | Cherries |
| ------- | ------ | ------- | ---------- | ---------- | --------- |
| Color | random | orange | darksalmon | dodgerblue | firebrick |
| Series1 | 12 | 14 | 19 | 7 | 8 |
| Series2 | 23 | 24 | 19 | 18 | 16 |
### Header **Row**
The table must have a header row. The first cell is ignored. The rest are used to label each slice of the chart.
### Color **Row**
The table must have a second row where the macro expects to find the colors of each slice. The first cell is ignored.
### Value **Rows**
Each following row contains the name of the series in the first column and its slice values in the subsequent columns.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://lewe.gitbook.io/chartjs-for-confluence/chart-types/pie-chart.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.