---
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: percentBarChart2
layout: subsection
wd_wcptag: percentBarChart2
---
Displays a chart that uses stacked bars to represent data as percentages. Each set of stacked bars totals 100% to illustrate numerical proportion.
Use `percentBarChart2` on view pages and as a view-only widget on edit pages. `percentBarChart2` doesn't update when the data changes on an edit page.
Note: The `axisIncrement`, `axisMinimum`, and `axisMaximum` attributes in `measurementAxisOptions` are percentages. Example: `"axisMaximum": 2` means a maximum of 200%, and `"axisMaximum": .5` means a maximum of 50% on the chart.
## Examples
This sample vertical `percentBarChart2` displays the recruiter category on the X axis and 3 measurement datasets on the Y axis. The legend corresponds to the measurement datasets.
The sample `percentBarChart2` with the 3 measurement datasets:
```
{
"type": "percentBarChart2",
"id": "percentBarChartExample1",
"data": "<% chartData.getChartData() %>",
"dataVariableName": "data",
"measurementDataSets": [
{
"name": "Finance",
"value": "<% data.recruits.finance %>"
},
{
"name": "Sales",
"value": "<% data.recruits.sales %>"
},
{
"name": "Support",
"value": "<% data.recruits.support %>"
}
],
"categoryDataSet": {
"name": "Recruiter",
"value": "<% data.recruiter %>"
},
"measurementAxisOptions": {
"axisTitle": "Recruits"
}
}
```
This `percentBarChart2` uses the same sample datasets, but specifies `"barOrientation": "HORIZONTAL"`. It displays the measurement datasets on the X axis and the recruiter category on the Y axis. The legend corresponds to the measurement datasets.
This next sample `percentBarChart2` displays the recruiters by region category on the X axis and finance recruits measurements on the Y axis. The legend corresponds to the recruiter secondary category.
The sample `percentBarChart2` with 1 measurement dataset and 2 category datasets:
```
{
"type": "percentBarChart2",
"id": "percentBarChartExample2",
"data": "<% chartData.getChartData() %>",
"dataVariableName": "data",
"barOrientation": "VERTICAL",
"measurementDataSets": [
{
"name": "Finance",
"value": "<% data.recruits.finance %>"
}
],
"categoryDataSet": {
"name": "Region",
"value": "<% data.region %>"
},
"secondaryCategory": {
"name": "Recruiter",
"value": "<% data.recruiter %>"
},
"measurementAxisOptions": {
"axisTitle": "Finance Recruits"
},
"categoryAxisOptions": {
"axisTitle": "Recruiters by Region"
}
}
```
This `percentBarChart2` uses the same sample datasets, but specifies `"barOrientation": "HORIZONTAL"`. It displays the finance recruits measurement dataset on the X axis and recruiters by region category on the Y axis. The legend corresponds to the Recruiters secondary category.
See [Reference: Sample Data for Chart 2.0 Examples](/wcp_docs/jmr1634444223025.html).
## Mobile Support
Android, iOS
## Attributes
- categoryDataSet
Data type: CategoryDataSet map
(Required) The categorical dataset. These categories correspond to the X or Y axis, depending on the bar orientation versus the `measurementDataSets`. The chart uses the categories to group the measurement data.
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.
- 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.
- measurementDataSets
Data type: LabeledMeasurementDataSet array
(Required) The numerical datasets. These measurements correspond to the X or Y axis, depending on the bar orientation versus the `categoryDataSet`. These measurements determine the size of the chart marks.
A LabeledMeasurementDataSet map in `measurementDataSets[]` 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`.
- chartMarkLabel
Data type: objectScript
A PMD script that can reference the `dataVariableName` and evaluates to a number or a string. The chart uses `chartMarkLabel` as the label next to the mark on the chart data, not on the axis. Example: Labels on the individual bar mark.
- 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
Data type: NumberFormatOptions map
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.
- barOrientation
Data type: Orientation enum
The orientation to render the bar chart. Valid values:
- VERTICAL (default)
- HORIZONTAL
- categoryAxisOptions
Data type: CategoryAxisOptions map
The options for the categorical axis.
A CategoryAxisOptions map contains these attributes:
- axisTitle
Data type: stringScript
The label override for the axis title. When null or empty, the default value is the concatenation of the names of the datasets along this axis.
- axisValueOrientation
Data type: Orientation enum
The orientation to render the labels along the axis. By default, the chart determines the orientation of the labels based on their length. If the labels are short enough to display horizontally, the chart displays them horizontally. If the labels are too long, the chart displays them vertically. You can set the `axisValueOrientation` attribute to force the orientation.
Valid values:
- HORIZONTAL
- VERTICAL
- hideAxisTitle
Data type: boolean
If true, the chart hides the axis title. The axis title is the label of the entire axis.
- hideAxisValues
Data type: boolean
If true, the chart hides the value labels along the axis. The axis values are the labels at each point along the axis.
- 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.
- 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
- measurementAxisOptions
Data type: MeasurementAxisOptions map
The options for the numerical axis.
A MeasurementAxisOptions map contains these attributes:
- axisIncrement
Data type: numberScript
The increment value of this axis. If not specified, the chart determines the default value based on the measurement data.
The `axisIncrement` value must be positive.
- axisMinimum
Data type: numberScript
The minimum value of this axis. If not specified, the chart determines the default value based on the measurement data.
The `axisMinimum` value must be less than the `axisMaximum`.
- axisMaximum
Data type: numberScript
The maximum value of this axis. If not specified, the chart determines the default value based on the measurement data.
The `axisMaximum` value must be greater than the `axisMinimum`.
- axisTitle
Data type: stringScript
The label override for the axis title. When null or empty, the default value is the concatenation of the names of the datasets along this axis.
- comparisonLineLabel
Data type: stringScript
The label of the comparison line that displays on hover.
- comparisonLineValue
Data type: numberScript
The axis position where the comparison line renders.
- hideAxisTitle
Data type: boolean
If true, the chart hides the axis title. The axis title is the label of the entire axis. The default is false.
- hideAxisValues
Data type: boolean
If true, the chart hides the value labels along the axis. The axis values are the labels at each point along the axis. The default is false.
- 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.
- secondaryCategory
Data type: CategoryDataSet map
An additional categorical dataset for the measurement dataset in `measurementDataSets[]`. By default, each item in the legend corresponds to a measurement dataset. If there is only 1 measurement dataset, then `secondaryCategory` configures an additional categorical dataset that displays in the legend.
Applies only if `measurementDataSets[]` contains only 1 measurement dataset.
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.
- showOutline
Data type: boolean
If true, the chart renders with outlines. 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.