> For the complete documentation index, see [llms.txt](https://nocode-artisan.gitbook.io/plotly-charts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/traces/basic-charts/pie.md).

# 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>