Skip to content

Pie

Overview

The pie trace type is used to create pie charts, which are circular charts divided into sectors representing proportions of a whole. Each sector’s arc length is proportional to the quantity it represents. Pie charts are great for visualizing part-to-whole relationships.

You can customize the colors, labels, and hover information to display your data effectively.

Common Uses

  • Part-to-Whole Relationships: Visualizing how different parts contribute to the whole.
  • Categorical Data: Showing the proportions of different categories in a dataset.
  • Survey Data: Visualizing how responses are distributed among categories.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Here's a simple pie chart showing the distribution of categories:

You can copy this code below to create this chart in your project:

models:
  - name: pie-data
    args:
      - echo
      - |
        category,value
        A,30
        B,20
        C,50
traces:
  - name: Simple Pie Chart
    model: ref(pie-data)
    props:
      type: pie
      labels: query(category)
      values: query(value)
charts:
  - name: Simple Pie Chart
    traces:
      - ref(Simple Pie Chart)
    layout:
      title:
        text: Simple Pie Chart<br><sub>Distribution of Categories</sub>

This example demonstrates a pie chart with custom colors for each category:

Here's the code:

models:
  - name: pie-data-colors
    args:
      - echo
      - |
        category,value,color
        A,40,#1f77b4
        B,30,#ff7f0e
        C,30,#2ca02c
traces:
  - name: Pie Chart with Custom Colors
    model: ref(pie-data-colors)
    props:
      type: pie
      labels: query(category)
      values: query(value)
      marker:
        colors: query(color)
charts:
  - name: Pie Chart with Custom Colors
    traces:
      - ref(Pie Chart with Custom Colors)
    layout:
      title:
        text: Pie Chart with Custom Colors<br><sub>Customized Coloring for Each Category</sub>

This example shows a pie chart with hover information that displays both the percentage and the value for each category:

Here's the code:

models:
  - name: pie-data-hover
    args:
      - echo
      - |
        category,value
        X,60
        Y,25
        Z,15
traces:
  - name: Pie Chart with Hover Info
    model: ref(pie-data-hover)
    props:
      type: pie
      labels: query(category)
      values: query(value)
      hoverinfo: "label+value+percent"
charts:
  - name: Pie Chart with Hover Info
    traces:
      - ref(Pie Chart with Hover Info)
    layout:
      title:
        text: Pie Chart with Hover Info<br><sub>Hover Info Showing Value and Percentage</sub>

Attributes

These attributes apply to traces where trace.props.type is set to pie. You would configure these attributes on the trace with the trace.props object. 

automargin: 'boolean' #(1)!
customdata: 'data array' #(2)!
direction: 'enumerated , one of ( "clockwise" | "counterclockwise" )' #(3)!
dlabel: 'number' #(4)!
domain:
  column: 'integer greater than or equal to 0' #(5)!
  row: 'integer greater than or equal to 0' #(6)!
  x: 'array' #(7)!
  y: 'array' #(8)!
hole: 'number between or equal to 0 and 1' #(9)!
hoverinfo: 'flaglist string. any combination of "label", "text", "value", "percent",
  "name" joined with a "+" or "all" or "none" or "skip".' #(10)!
hoverlabel:
  align: 'enumerated or array of enumerateds , one of ( "left" | "right" | "auto"
    )' #(11)!
  bgcolor: 'color or array of colors' #(12)!
  bordercolor: 'color or array of colors' #(13)!
  font:
    color: color or array of colors
    family: 'string or array of strings' #(14)!
    size: number or array of numbers greater than or equal to 1
  namelength: 'integer or array of integers greater than or equal to -1' #(15)!
hovertemplate: 'string or array of strings' #(16)!
hovertext: 'string or array of strings' #(17)!
ids: 'data array' #(18)!
insidetextfont:
  color: color or array of colors
  family: 'string or array of strings' #(19)!
  size: number or array of numbers greater than or equal to 1
insidetextorientation: 'enumerated , one of ( "horizontal" | "radial" | "tangential"
  | "auto" )' #(20)!
label0: 'number' #(21)!
labels: 'data array' #(22)!
legendgroup: 'string' #(23)!
legendgrouptitle:
  font:
    color: color
    family: 'string' #(24)!
    size: number greater than or equal to 1
  text: 'string' #(25)!
legendrank: 'number' #(26)!
legendwidth: 'number greater than or equal to 0' #(27)!
marker:
  colors: 'data array' #(28)!
  line:
    color: 'color or array of colors' #(29)!
    width: 'number or array of numbers greater than or equal to 0' #(30)!
meta: 'number or categorical coordinate string' #(31)!
opacity: 'number between or equal to 0 and 1' #(32)!
outsidetextfont:
  color: color or array of colors
  family: 'string or array of strings' #(33)!
  size: number or array of numbers greater than or equal to 1
pull: 'number or array of numbers between or equal to 0 and 1' #(34)!
rotation: 'angle' #(35)!
scalegroup: 'string' #(36)!
showlegend: 'boolean' #(37)!
sort: 'boolean' #(38)!
text: 'data array' #(39)!
textfont:
  color: color or array of colors
  family: 'string or array of strings' #(40)!
  size: number or array of numbers greater than or equal to 1
textinfo: 'flaglist string. any combination of "label", "text", "value", "percent"
  joined with a "+" or "none".' #(41)!
textposition: 'enumerated or array of enumerateds , one of ( "inside" | "outside"
  | "auto" | "none" )' #(42)!
texttemplate: 'string or array of strings' #(43)!
title:
  font:
    color: color or array of colors
    family: 'string or array of strings' #(44)!
    size: number or array of numbers greater than or equal to 1
  position: 'enumerated , one of ( "top left" | "top center" | "top right" | "middle
    center" | "bottom left" | "bottom center" | "bottom right" )' #(45)!
  text: 'string' #(46)!
type: pie
uirevision: 'number or categorical coordinate string' #(47)!
values: 'data array' #(48)!
visible: 'enumerated , one of ( true | false | "legendonly" )' #(49)!
  1. Determines whether outside text labels can push the margins.
  2. Assigns extra data each datum. This may be useful when listening to hover, click and selection events. Note that, "scatter" traces also appends customdata items in the markers DOM elements
  3. Specifies the direction at which succeeding sectors follow one another.
  4. Sets the label step. See label0 for more info.
  5. If there is a layout grid, use the domain for this column in the grid for this pie trace .
  6. If there is a layout grid, use the domain for this row in the grid for this pie trace .
  7. Sets the horizontal domain of this pie trace (in plot fraction).
  8. Sets the vertical domain of this pie trace (in plot fraction).
  9. Sets the fraction of the radius to cut out of the pie. Use this to make a donut chart.
  10. 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.
  11. Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines
  12. Sets the background color of the hover labels for this trace
  13. Sets the border color of the hover labels for this trace.
  14. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  15. Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to namelength - 3 characters and add an ellipsis.
  16. 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. variables label, color, value, percent and text. 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>.
  17. Sets hover text elements associated with each sector. If a single string, the same string appears for all data points. If an array of string, the items are mapped in order of this trace's sectors. To be seen, trace hoverinfo must contain a "text" flag.
  18. Assigns id labels to each datum. These ids for object constancy of data points during animation. Should be an array of strings, not numbers or any other type.
  19. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  20. 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.
  21. Alternate to labels. Builds a numeric set of labels. Use with dlabel where label0 is the starting label and dlabel the step.
  22. 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.
  23. Sets the legend group for this trace. Traces part of the same legend group hide/show at the same time when toggling legend items.
  24. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  25. Sets the title of the legend group.
  26. Sets the legend rank for this trace. Items and groups with smaller ranks are presented on top/left side while with "reversed"legend.traceorder` they are on bottom/right side. The default legendrank is 1000, so that you can use ranks less than 1000 to place certain items before all unranked items, and ranks greater than 1000 to go after all unranked items.
  27. Sets the width (in px or fraction) of the legend for this trace.
  28. Sets the color of each sector. If not specified, the default trace color set is used to pick the sector colors.
  29. Sets the color of the line enclosing each sector.
  30. Sets the width (in px) of the line enclosing each sector.
  31. Assigns extra meta information associated with this trace that can be used in various text attributes. Attributes such as trace name, graph, axis and colorbar title.text, annotation text rangeselector, updatemenues and sliders label text all support meta. To access the trace meta values in an attribute in the same trace, simply use %{meta[i]} where i is the index or key of the meta item in question. To access trace meta in layout attributes, use %{data[n[.meta[i]} where i is the index or key of the meta and n is the trace index.
  32. Sets the opacity of the trace.
  33. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  34. 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.
  35. Instead of the first slice starting at 12 o'clock, rotate to some other angle.
  36. If there are multiple pie charts that should be sized according to their totals, link them by providing a non-empty group id here shared by every trace in the same group.
  37. Determines whether or not an item corresponding to this trace is shown in the legend.
  38. Determines whether or not the sectors are reordered from largest to smallest.
  39. 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.
  40. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  41. Determines which trace information appear on the graph.
  42. Specifies the location of the textinfo.
  43. 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. variables label, color, value, percent and text.
  44. HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans",, "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
  45. Specifies the location of the title. Note that the title's position used to be set by the now deprecated titleposition attribute.
  46. 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.
  47. Controls persistence of some user-driven changes to the trace: constraintrange in parcoords traces, as well as some editable: true modifications such as name and colorbar.title. Defaults to layout.uirevision. Note that other user-driven trace attribute changes are controlled by layout attributes: trace.visible is controlled by layout.legend.uirevision, selectedpoints is controlled by layout.selectionrevision, and colorbar.(x|y) (accessible with config: {editable: true}) is controlled by layout.editrevision. Trace changes are tracked by uid, which only falls back on trace index if no uid is provided. So if your app can add/remove traces before the end of the data array, such that the same trace has a different index, you can still preserve user-driven changes if you give each trace a uid that stays with it as it moves.
  48. Sets the values of the sectors. If omitted, we count occurrences of each label.
  49. Determines whether or not this trace is visible. If "legendonly", the trace is not drawn, but can appear as a legend item (provided that the legend itself is visible).