# Pie & Donut

### Basic Options

<details>

<summary>Direction</summary>

**Default Value**: counterclockwise

**Type**: enumerated

**Enum Options**: clockwise,counterclockwise

**Documentation**: Specifies the direction at which succeeding sectors follow one another.

**Path**: data.index.direction

</details>

<details>

<summary>Hole</summary>

**Default Value**: 0

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the fraction of the radius to cut out of the pie. Use this to make a donut chart.

**Path**: data.index.hole

</details>

<details>

<summary>Name</summary>

**Type**: string

**Documentation**: Sets the trace name. The trace name appears as the legend item and on hover.

**Path**: data.index.name

</details>

<details>

<summary>Opacity</summary>

**Default Value**: 1

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the opacity of the trace.

**Path**: data.index.opacity

</details>

<details>

<summary>Pull</summary>

**Default Value**: 0

**Type**: number

**Accept List**: true

**Min**: 0

**Max**: 1

**Documentation**: Sets the fraction of larger radius to pull the sectors out from the center. This can be a constant to pull all slices apart from each other equally or an array to highlight one or more slices.

**Path**: data.index.pull

</details>

<details>

<summary>Rotation</summary>

**Default Value**: 0

**Type**: angle

**Documentation**: Instead of the first slice starting at 12 o'clock, rotate to some other angle.

**Path**: data.index.rotation

</details>

<details>

<summary>Sort</summary>

**Default Value**: true

**Type**: boolean

**Documentation**: Determines whether or not the sectors are reordered from largest to smallest.

**Path**: data.index.sort

</details>

***

### Data Source

<details>

<summary>Labels</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the sector labels. If `labels` entries are duplicated, we sum associated `values` or simply count occurrences if `values` is not provided. For other array attributes (including color) we use the first non-empty entry among all occurrences of the label.

**Path**: data.index.labels

</details>

<details>

<summary>Text</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets text elements associated with each sector. If trace `textinfo` contains a *text* flag, these elements will be seen on the chart. If trace `hoverinfo` contains a *text* flag and *hovertext* is not set, these elements will be seen in the hover labels.

**Path**: data.index.text

</details>

<details>

<summary>Values</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the values of the sectors. If omitted, we count occurrences of each label.

**Path**: data.index.values

</details>

***

### Title Attributes

<details>

<summary>Font Color</summary>

**Type**: color

**Accept List**: true

**Path**: data.index.title.font.color

</details>

<details>

<summary>Font Size</summary>

**Type**: number

**Accept List**: true

**Min**: 1

**Path**: data.index.title.font.size

</details>

<details>

<summary>Position</summary>

**Type**: enumerated

**Enum Options**: top left,top center,top right,middle center,bottom left,bottom center,bottom right

**Documentation**: Specifies the location of the `title`. Note that the title's position used to be set by the now deprecated `titleposition` attribute.

**Path**: data.index.title.position

</details>

<details>

<summary>Text</summary>

**Default Value**:

**Type**: string

**Documentation**: Sets the title of the chart. If it is empty, no title is displayed. Note that before the existence of `title.text`, the title's contents used to be defined as the `title` attribute itself. This behavior has been deprecated.

**Path**: data.index.title.text

</details>

### Items Styling

<details>

<summary>Colors</summary>

**Type**: any

**Accept List**: true

**Documentation**: Sets the color of each sector. If not specified, the default trace color set is used to pick the sector colors.

**Path**: data.index.marker.colors

</details>

<details>

<summary>Line Color</summary>

**Default Value**: #444

**Type**: color

**Accept List**: true

**Documentation**: Sets the color of the line enclosing each sector.

**Path**: data.index.marker.line.color

</details>

<details>

<summary>Line Width</summary>

**Default Value**: 0

**Type**: number

**Accept List**: true

**Min**: 0

**Documentation**: Sets the width (in px) of the line enclosing each sector.

**Path**: data.index.marker.line.width

</details>

***

### Items Pattern Options

<details>

<summary>Pattern Fg Color</summary>

**Type**: color

**Accept List**: true

**Documentation**: When there is no colorscale sets the color of foreground pattern fill. Defaults to a `marker.color` background when `fillmode` is *replace*. Otherwise, defaults to dark grey or white to increase contrast with the `bgcolor`.

**Path**: data.index.marker.pattern.fgcolor

</details>

<details>

<summary>Pattern Fill Mode</summary>

**Default Value**: replace

**Type**: enumerated

**Enum Options**: replace,overlay

**Documentation**: Determines whether `marker.color` should be used as a default to `bgcolor` or a `fgcolor`.

**Path**: data.index.marker.pattern.fillmode

</details>

<details>

<summary>Pattern Shape</summary>

**Default Value**:

**Type**: enumerated

**Accept List**: true

**Enum Options**: ,/,,x,-,|,+,.

**Documentation**: Sets the shape of the pattern fill. By default, no pattern is used for filling the area.

**Path**: data.index.marker.pattern.shape

</details>

<details>

<summary>Pattern Size</summary>

**Default Value**: 8

**Type**: number

**Accept List**: true

**Min**: 0

**Documentation**: Sets the size of unit squares of the pattern fill in pixels, which corresponds to the interval of repetition of the pattern.

**Path**: data.index.marker.pattern.size

</details>

***

### Text Formatting

<details>

<summary>Auto Margin</summary>

**Default Value**: false

**Type**: boolean

**Documentation**: Determines whether outside text labels can push the margins.

**Path**: data.index.automargin

</details>

<details>

<summary>Inside Text Orientation</summary>

**Default Value**: auto

**Type**: enumerated

**Enum Options**: horizontal,radial,tangential,auto

**Documentation**: Controls the orientation of the text inside chart sectors. When set to *auto*, text may be oriented in any direction in order to be as big as possible in the middle of a sector. The *horizontal* option orients text to be parallel with the bottom of the chart, and may make text smaller in order to achieve that goal. The *radial* option orients text along the radius of the sector. The *tangential* option orients text perpendicular to the radius of the sector.

**Path**: data.index.insidetextorientation

</details>

<details>

<summary>Text Angle</summary>

**Default Value**: auto

**Type**: angle

**Documentation**: Sets the angle of the tick labels with respect to the bar. For example, a `tickangle` of -90 draws the tick labels vertically. With *auto* the texts may automatically be rotated to fit with the maximum size in bars.

**Path**: data.index.textangle

</details>

<details>

<summary>Color</summary>

**Type**: color

**Accept List**: true

**Path**: data.index.textfont.color

</details>

<details>

<summary>Size</summary>

**Type**: number

**Accept List**: true

**Min**: 1

**Path**: data.index.textfont.size

</details>

<details>

<summary>Text Position</summary>

**Default Value**: auto

**Type**: enumerated

**Accept List**: true

**Enum Options**: inside,outside,auto,none

**Documentation**: Specifies the location of the `text`. *inside* positions `text` inside, next to the bar end (rotated and scaled if needed). *outside* positions `text` outside, next to the bar end (scaled if needed), unless there is another bar stacked on this one, then the text gets pushed inside. *auto* tries to position `text` inside the bar, but if the bar is too small and no bar is stacked on this one the text is moved outside. If *none*, no text appears.

**Path**: data.index.textposition

</details>

<details>

<summary>Text Template</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". <https://github.com/d3/d3-format/tree/v1.4.5#d3-format> for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". <https://github.com/d3/d3-time-format/tree/v2.2.3#locale\\_format> for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Finally, the template string has access to variables `value` and `label`.

**Path**: data.index.texttemplate

</details>

<details>

<summary>Inside Text Anchor</summary>

**Default Value**: end

**Type**: enumerated

**Enum Options**: end,middle,start

**Documentation**: Determines if texts are kept at center or start/end points in `textposition` *inside* mode.

**Path**: data.index.insidetextanchor

</details>

***

### Hover Formatting

<details>

<summary>Hover Info</summary>

**Default Value**: all

**Type**: flaglist

**Accept List**: true

**Flag Options**: x,y,z,text,name

**Flag Single**: all,none,skip

**Documentation**: Determines which trace information appear on hover. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.

**Path**: data.index.hoverinfo

</details>

<details>

<summary>Hover Template</summary>

**Default Value**:

**Type**: string

**Accept List**: true

**Documentation**: Template string used for rendering the information that appear on hover box. Note that this will override `hoverinfo`. Variables are inserted using %{variable}, for example "y: %{y}" as well as %{xother}, {%*xother}, {%xother}, {%xother*}. When showing info for several points, *xother* will be added to those with different x positions from the first point. An underscore before or after *(x|y)other* will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". <https://github.com/d3/d3-format/tree/v1.4.5#d3-format> for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}". <https://github.com/d3/d3-time-format/tree/v2.2.3#locale\\_format> for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link <https://plotly.com/javascript/plotlyjs-events/#event-data>. Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. Finally, the template string has access to variables `value` and `label`. Anything contained in tag `<extra>` is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag `<extra></extra>`.

**Path**: data.index.hovertemplate

</details>


---

# Agent Instructions: 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:

```
GET https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/basic-charts/pie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.