--- category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend] keyword: [Extend, Presentation Components, widgets, tags, UI components] nav: wcp_docs parent_url: /wcp_docs/ title: donutChart2 layout: subsection wd_wcptag: donutChart2 --- Displays data as a circle with slices, which illustrate quantitative proportions of data that comprise an overall objective. Use `donutChart2` on view pages and as a view-only widget on edit pages. `donutChart2` doesn't update when the data changes on an edit page. ## Example This sample `donutChart2` displays the number of finance recruits as the slice sizes and the recruiter dataset as the slice color. ![](GUID-ff5086e3-74e6-4a95-a8dc-e85031f538e3-enHYPHENus.png) The sample `donutChart2` with the slice size, color, and detail datasets: ``` { "type": "donutChart2", "id": "donutExample", "data": "<% chartData.getChartData() %>", "dataVariableName": "data", "sliceSizeDataSet": { "name": "Finance Recruits", "value": "<% data.recruits.finance %>" }, "sliceColorDataSet": { "name": "Recruiter", "value": "<% data.recruiter %>" }, "sliceDetailDataSet": { "name": "Region", "value": "<% data.region %>" }, "title": "<% 'Finance Recruits' %>", "subtitle": "<% 'RegionA and RegionB' %>", "showLabelLines": true, "showPercentLabels": true } ``` See [Reference: Sample Data for Chart 2.0 Examples](/wcp_docs/jmr1634444223025.html). ## Mobile Support Android, iOS ## Attributes - data Data type: listScript (Required) A PMD script or endpoint that returns a list of data rendered by the chart. This sample `data` uses a sample script chartData.getChartData(), which returns a list. ``` "data": "<% chartData.getChartData() %>" ``` To reference each object in the data list, use `dataVariableName`. - dataVariableName Data type: string (Required) The variable name that references objects in the list returned by the `data` script. Specify only alphanumeric and underscore characters. - sliceColorDataSet Data type: CategoryDataSet map (Required) The categorical set of data corresponding to the colors of the slices (legend). A CategoryDataSet map contains these attributes: - name Data type: stringScript (Required) The name of this dataset. By default, the chart uses the names of all datasets in the axis title unless overridden in the axis options. The chart also uses this name in the legend and tooltip. - value Data type: stringScript (Required) The category axis or legend value of the dataset. References the `dataVariableName`. - hideInTooltip Data type: boolean If true, the chart removes this data from the tooltip that displays on hover. The default is false. - sliceDetailDataSet Data type: CategoryDataSet map An optional additional categorical dataset that displays in the tooltip. A CategoryDataSet map contains these attributes: - name Data type: stringScript (Required) The name of this dataset. By default, the chart uses the names of all datasets in the axis title unless overridden in the axis options. The chart also uses this name in the legend and tooltip. - value Data type: stringScript (Required) The category axis or legend value of the dataset. References the `dataVariableName`. - hideInTooltip Data type: boolean If true, the chart removes this data from the tooltip that displays on hover. The default is false. - sliceSizeDataSet Data type: MeasurementDataSet map (Required) The numerical dataset that corresponds to the sizes of the slices. The numerical values of this dataset must be positive. The chart ignores any non-positive values. A MeasurementDataSet map contains these attributes: - name Data type: stringScript (Required) The name of this dataset. By default, the chart uses the names of all datasets in the axis title unless overridden in the axis options. The chart also uses this name in the legend and tooltip. - value Data type: numberScript (Required) The measurement axis value of the dataset. References the `dataVariableName`. - hideInTooltip Data type: boolean If true, the chart removes this data from the tooltip that displays on hover. The default is false. - numberFormatCode Data type: string The Excel format code for formatting the numeric value. For possible number format codes, see the Microsoft Excel documentation: [Number format codes](https://support.microsoft.com/en-us/office/number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68). The `numberFormatCode` attribute is mutually exclusive with `numberFormatOptions`. - numberFormatOptions Contains options for formatting the numeric value. The `numberFormatOptions` attribute is mutually exclusive with `numberFormatCode`. Within `numberFormatOptions`, you can include any of these attributes for each measurement dataset: - formatType Data type: FormatType enum The notation for formatting the numeric value. Valid values: - NORMAL (default) - Example: 0.123 - SCIENTIFIC - Example: 1.23E-1 - PERCENT - Example: 12.3% - signType Data type: SignType enum The sign symbol for negative values. Valid values: - MINUS (default) - Example: -123 - PARENTHESIS - Example: (123) - precision Data type: integer The non-negative number of decimal places to display. Default is 4. - showTrailingZeros Data type: boolean If true, display the trailing zeros if the number of decimal places is less than the precision. Example: If the value is 1.23, `precision` is 4, and `showTrailingZeros` is true, the displayed value is 1.2300. - accessibilityMode Data type: booleanScript If true, the chart renders with patterns for visual accessibility. The default is false. - animateOnLoad Data type: boolean If true, the chart renders with an animation on page load. The default is false. - colors Data type: listScript A list of colors that override the default color palette of the chart 2.0 widgets. Specify valid CSS color names, hex string values, or both. If you specify an incorrect color or hex value, it displays as black. For each data point, the chart rotates through the colors in the list and repeats them as needed. To ensure nonrepeating colors on a chart with many data points, specify at least as many colors as the legend on the chart. This sample `colors` attribute uses a PMD script: ``` "colors": "<% customColorPalettes.getMyPalette() %>" ``` This example uses color and hex values: ``` "colors": "<% ['red', 'orange', 'yellow', 'green', '#FFb2AE'] %>" ``` - hideChartControls Data type: boolean If true, the chart hides the controls that allow zooming and panning. The default is false. - hideLabels Data type: boolean If true, the chart hides the labels of the numerical values next to each slice. The default is false. - id Data type: stringScript Unique identifier used for debugging purposes only. Notes: - The `id` must start with a letter. - The `id` must be unique per page. - legendPosition Data type: LegendPosition enum The position where to display the legend. Valid values: - BOTTOM (default) - TOP - LEFT - RIGHT - HIDDEN - render Data type: booleanScript If true, this tag renders as a widget on the page. If false, the page doesn't add this widget. The default is true. - showLabelLines Data type: boolean If true, the chart shows lines from the numerical value labels to each slice. The default is false. - showOutline Data type: boolean If true, the chart renders with outlines. The default is false. - showPercentLabels Data type: boolean If true, the chart shows a percentage next to each numerical value label by the slices. The default is false. - sortOrder Data type: stringScript When you set `sorted` to true on the `section` or `fieldSet` parent of this widget, the `sortOrder` attribute determines the order of this widget within its parent. The sort order is relative to the siblings of the widget. Typical values are "a", "b", "c", and so on. Example: The widget with `"sortOrder": "a"` displays before the widget with `"sortOrder": "b"`. Note: The `sortOrder` doesn't apply to sorting data on the widget. `sortOrder` only applies to the placement order of the widgets within the parent widget. - subtitle Data type: stringScript The subtitle under the title in the center of the donut chart. - title Data type: stringScript The title in the center of the donut chart.