---
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: >- 
  Concept: Configuring Charts 2.0
layout: subsection
---

The chart 2.0 widgets provide improved chart capabilities that are available in the Workday UI. You can use chart 2.0 widgets on view pages, display them as view-only widgets on edit pages, and enable:

-   User-friendly elements such as chart controls and animation.
-   Accessibility mode.
-   Configurable legend positions.
-   Comparison line and chart mark labels.
-   Additional dimension for categorical data.
-   Axis configuration.
-   Customized tooltip display.


PMD Scripting support:

-   You can use PMD Scripting functions in your script bindings.
-   Currently, you can't reference a chart id in a `script` block outside the tag, and the PMD Scripting methods don't apply to charts.


Chart configuration:

-   [Chart Data](/wcp_docs/ltg1634444407234.html#section-chart-data)
-   [Data Options](/wcp_docs/ltg1634444407234.html#section-data-options)
-   [Style Options](/wcp_docs/ltg1634444407234.html#section-style-options)
-   [Axis Options](/wcp_docs/ltg1634444407234.html#section-axis-options)


## <a id="section-chart-data"></a>Chart Data

To specify the data to render on a chart, set these required attributes:

-   <b>data</b>

    Specify a script that evaluates to a list of data.

    This sample `data` uses a sample script <i>chartData.getChartData()</i>, which returns a `data[]` list.

    ```
    "data": "<% chartData.getChartData() %>"
    ```

    <b>Note:</b> The chart 2.0 widgets render the data according to the sort order within the input dataset.

-   <b>dataVariableName</b>

    Specify a variable name for referencing the fields in the list. Example:

    ```
    "dataVariableName": "data"
    ```

    When you specify the `value` attribute in a measurement or category dataset, use `dataVariableName` to reference the data fields. Example:

    ```
    "value": "<% data.field1 %>"
    ```

    If the field is at a lower level in the data hierarchy, specify the field path:

    ```
    "value": "<% data.field1.subfield1 %>"
    ```



To configure the datasets that generate the data values along the X and Y axes, specify the dataset `name` and `value` in these chart dataset attributes:

For the area charts (`overlaidAreaChart2`, `percentAreaChart2`, `stackedAreaChart2`):

<table><thead><tr><th>Dataset attribute</th><th>Axis</th></tr></thead><tbody><tr><td><code>categoryDataSet</code></td><td>X axis.</td></tr><tr><td><code>measurementDataSets[]</code></td><td>Y axis.</td></tr><tr><td><code>secondaryCategory</code></td><td><p>Displays an additional categorical dataset as a legend below the X axis.</p> <p><code>secondaryCategory</code> applies only if you specify 1 measurement dataset.</p> <p>By default (if you don't specify <code>secondaryCategory</code>), the legend corresponds to the measurement dataset.</p></td></tr></tbody></table><br/>

For the bar charts (`clusteredBarChart2`, `percentBarChart2`, `stackedBarChart2`):

<table><thead><tr><th>Dataset attribute</th><th>Axis</th></tr></thead><tbody><tr><td><code>categoryDataSet</code></td><td>X or Y axis, depending on the bar orientation versus the measurement datasets.</td></tr><tr><td><code>measurementDataSets[]</code></td><td>X or Y axis, depending on the bar orientation versus the category dataset.</td></tr><tr><td><code>secondaryCategory</code></td><td><p>Displays an additional categorical dataset as a legend below the X axis.</p> <p><code>secondaryCategory</code> applies only if you specify 1 measurement dataset.</p> <p>By default (if you don't specify <code>secondaryCategory</code>), the legend corresponds to the measurement dataset.</p></td></tr></tbody></table><br/>

For the combination chart (`comboChart2`):

<table><thead><tr><th>Dataset attribute</th><th>Axis</th></tr></thead><tbody><tr><td><code>categoryDataSet</code></td><td>X axis.</td></tr><tr><td><code>measurementDataSets[]</code></td><td>Y axis. Each measurement dataset must specify a chart type: area, bar, line, or point.</td></tr></tbody></table><br/>

For the donut chart (`donutChart2`):

<table><thead><tr><th>Dataset attribute</th><th>Slice property</th></tr></thead><tbody><tr><td><code>sliceColorDataSet</code></td><td>Color of the slice.</td></tr><tr><td><code>sliceSizeDataSet</code></td><td>Circumference size of the slice.</td></tr><tr><td><code>sliceDetailDataSet</code></td><td>Additional category data that displays in the tooltip.</td></tr></tbody></table><br/>

For the dual axis chart (`dualAxisChart2`):

<table><thead><tr><th>Dataset attribute</th><th>Axis</th></tr></thead><tbody><tr><td><code>categoryDataSet</code></td><td>X axis.</td></tr><tr><td><code>measurementDataSets[]</code></td><td>Y axis. Each measurement dataset: <ul><li>Must specify a chart type: area, bar, line, or point.
</li><li>Can specify either left or right Y-axis position. Default: left.
</li></ul></td></tr></tbody></table><br/>

For the line and bubble charts (`lineChart2` and `bubbleChart2`):

<table><thead><tr><th>Dataset attribute</th><th>Axis</th></tr></thead><tbody><tr><td><code>categoryDataSet</code></td><td>X axis.</td></tr><tr><td><code>measurementDataSets[]</code></td><td>Y axis.</td></tr></tbody></table><br/>

For the scatter chart (`scatterChart2`):

<table><thead><tr><th>Dataset attribute</th><th>Axis</th></tr></thead><tbody><tr><td><code>horizontalAxisPositions</code></td><td>X axis.</td></tr><tr><td><code>verticalAxisPositions</code></td><td>Y axis.</td></tr></tbody></table><br/>

See the individual chart 2.0 tag documentation for tag-specific examples of how to specify the datasets.

## <a id="section-data-options"></a>Data Options

## <a id="section_chartMarkLabels"></a>Chart Mark Labels

To define the data labels on the chart, set the `chartMarkLabel` attribute.

Default: none

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementDataSets": [
    {
      "name": "Finance Recruits",
      "value": "<% data.recruits.finance %>",
      "chartMarkLabel": "<% data.recruits.finance > 85 ? 'High' : 'Low' %>"
 
    }
  ]
  ...
}
```

## <a id="section_comparisonLine"></a>Comparison Line

To display a comparison line on the chart, set the `comparisonLineLabel` and `comparisonLineValue` attributes in `measurementAxisOptions`.

Default: none

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementAxisOptions": {
    "comparisonLineLabel": "<% 'Quota' %>",
    "comparisonLineValue": "<% 85 %>"
  }
  ...
}
```

## <a id="section_hideInTooltip"></a>Hide in Tooltip

To hide or display dataset values from the tooltip, set the `hideInTooltip` attribute in the corresponding dataset. By default, the dataset value displays in the tooltip.

Default: false

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementDataSets": [
    {
      "name": "Finance Recruits",
      "value": "<% data.recruits.finance %>",
      "hideInTooltip": true
    }
  ],
  "categoryDataSet": {
    "name": "Years Employed",
    "value": "<% data.yearsEmployed %>",
    "hideInTooltip": false
  },
  "secondaryCategory": {
      "name": "Recruiters",
      "value": "<% data.recruiter %>"
    },
  ...
}
```

The tooltip hides "Finance Recruits", but displays "Years Employed". By default, the tooltip displays the "Recruiters" (`secondaryCategory`) because the `hideInTooltip` attribute is absent and defaults to false.

## <a id="section_osk_qks_bsb"></a>Number Formatting

By default, numeric values display up to 4 decimal places, without showing trailing zeros. Negative numbers display the minus sign by default. You can override the default numeric formats in measurement datasets by specifying 1 of these mutually exclusive attributes:

-   `numberFormatCode` - An Excel format code for formatting the numeric value. See the Microsoft Excel documentation: [Number format codes](https://support.microsoft.com/en-us/office/number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68).
-   `numberFormatOptions` - A set of options such as the numeric format, sign, precision, and trailing zeros. For normalized charts (percent bar chart and percent area chart), only the `signType` option applies.


Number formats affect the display of numeric values in the tooltip and the axes. For charts with multiple measurement datasets, each dataset can have different number format options. Example:

```
"measurementDataSets": [
  {
    "name": "Finance",
    "value": "<% data.results.finance %>",
    "numberFormatCode": "#,###.00"
  },
  {
    "name": "Sales",
    "value": "<% data.results.sales %>",
    "numberFormatOptions": {
      "formatType": "SCIENTIFIC",
      "signType": "MINUS",
      "precision": 2
    }
  }
]
```

Some charts can have multiple measurement datasets that correspond to the same axis. Example: bar charts, area charts, combo chart, dual axis chart. These charts use the format options of the first measurement dataset in the list. In the example above, the chart uses the `numberFormatCode` as the format for the axis values.

Since axis values are typically whole numbers, axis values ignore the `precision` and `showTrailingZeros` format options. The only format options that apply on the axis are:

-   `numberFormatCode`
-   `formatType`
-   `signType`


## <a id="section-style-options"></a>Style Options

## <a id="section_accessibilityMode"></a>Accessibility mode

The accessibility mode displays visual patterns on the chart marks. To enable the accessibility mode, set `"accessibilityMode": "<% true %>"`.

Default: false

Example:

```
{
  "type": "clusteredBarChart2",
  "accessibilityMode": "<% true %>"
  ...
}
```

## <a id="section_animateOnLoad"></a>Animate on Load

To display animation while the chart loads, set `"animateOnLoad": true`.

Default: false

Example:

```
{
  "type": "clusteredBarChart2",
  "animateOnLoad": true
  ...
}
```

## <a id="section_rdr_tt5_25b"></a>Color Palettes

To display custom color palettes, specify the `colors` attribute with a list of colors. You can use a PMD script that returns a list of CSS color names or hex values. Ensure that the specified colors are valid string values.

Default: The default color palette used by all chart 2.0 widgets

Example:

```
{
  "type": "clusteredBarChart2",
  "colors": "<% customColors.getPastelPalette() %>"
  ...
}
```

The sample script:

```
var getPastelPalette = function() {
  var palette =  ["thistle", "lightPink", "peachpuff", "lightsteelblue", "mistyrose", "#D0D9B3", "lightblue",
  "#FFb2AE", "#B7CFB7"]
  return palette
}
```

## <a id="section_hideChartControls"></a>Hiding Chart Controls

To hide the zoom and pan controls, set `"hideChartControls": true`.

Default: false

Example:

```
{
  "type": "clusteredBarChart2",
  "hideChartControls": true
  ...
}
```

## <a id="section_legendPosition"></a>Legend Position

To define the position of the legend on the chart, set the `legendPosition` attribute to:

-   BOTTOM
-   TOP
-   LEFT
-   RIGHT
-   HIDDEN


Default: BOTTOM

Example:

```
{
  "type": "clusteredBarChart2",
  "legendPosition": "TOP"
  ...
}
```

## <a id="section_outline"></a>Outline

To display outlines around the chart marks, set `"showOutline": true`.

Default: false

Example:

```
{
  "type": "clusteredBarChart2",
  "showOutline": true
  ...
}
```

## <a id="section-axis-options"></a>Axis Options

## <a id="section_axisTitle"></a>Axis Title

To define the axis title, set the `axisTitle` attribute in `measurementAxisOptions` or `categoryAxisOptions`.

Default: The category dataset name or a concatenation of the measurement dataset names.

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementAxisOptions": {
    "axisTitle": "<% 'My Custom Label' %>"
  }
  ...
}
```

## <a id="section_hideAxisTitle"></a>Hide Axis Title

To hide the axis title, set the `hideAxisTitle` attribute in `measurementAxisOptions` or `categoryAxisOptions`.

Default: none

Example:

```
{
  "type": "clusteredBarChart2",
  "categoryAxisOptions": {
    "hideAxisTitle": true
  }
  ...
}
```

## <a id="section_hideAxisValues"></a>Hide Axis Values

To hide the values along the axis, set the `hideAxisValues` attribute in `measurementAxisOptions` or `categoryAxisOptions`.

Default: none

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementAxisOptions": {
    "hideAxisValues": true
  }
  ...
}
```

## <a id="section_labelOrientation"></a>Label Orientation

To define the orientation of the labels along the category axis, set the `axisValueOrientation` attribute in `categoryAxisOptions` to:

-   HORIZONTAL
-   VERTICAL


Default: Horizontal or vertical orientation based on label length.

Example:

```
{
  "type": "clusteredBarChart2",
  "categoryAxisOptions": {
    "axisValueOrientation": "VERTICAL"
  }
  ...
}
```

## <a id="section_axisMinimum"></a>Axis Minimum

To override the minimum on the measurement axis, set the `axisMinimum` attribute in `measurementAxisOptions`. If you set both `axisMinimum` and `axisMaximum`, ensure that `axisMinimum` is less than `axisMaximum`.

Default: none

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementAxisOptions": {
    "axisMinimum": -50
  }
  ...
}
```

## <a id="section_axisMaximum"></a>Axis Maximum

To override the maximum on the measurement axis, set the `axisMaximum` attribute in `measurementAxisOptions`. If you set both `axisMinimum` and `axisMaximum`, ensure that `axisMinimum` is less than `axisMaximum`.

Default: none

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementAxisOptions": {
    "axisMaximum": 400
  }
  ...
}
```

## <a id="section_axisIncrement"></a>Axis Increment

To override the increments on the measurement axis, set the `axisIncrement` attribute in `measurementAxisOptions`. The `axisIncrement` value must be less than the difference between `axisMinimum` and `axisMaximum`.

Default: none

Example:

```
{
  "type": "clusteredBarChart2",
  "measurementAxisOptions": {
    "axisIncrement": 50
  }
  ...
}
```