--- 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: dualAxisChart2 layout: subsection wd_wcptag: dualAxisChart2 --- Displays a combination of charts of area, bar, line, and point marks with left and right Y axes. You must specify a chart mark type for each measurement dataset. You can also specify whether a measurement dataset displays on the left or right Y axis. Use `dualAxisChart2` on view pages and as a view-only widget on edit pages. `dualAxisChart2` doesn't update when the data changes on an edit page. ## Example This sample `dualAxisChart2` displays the recruiter category on the X axis, recruit measurement dataset on the left Y axis, and the hired recruits on the right Y axis. The chart line also displays chart mark labels with the number of hired recruits. ![](GUID-89ba3c88-732c-40e1-aa90-7d951532539c-enHYPHENus.png) The sample `dualAxisChart2` with multiple measurement datasets and their corresponding axis positions: ``` { "type": "dualAxisChart2", "id": "dualAxisChartExample1", "data": "<% chartData.getChartData() %>", "dataVariableName": "data", "measurementDataSets": [ { "name": "Finance", "value": "<% data.recruits.finance %>", "chartMarkType": "BAR", "axisPosition": "LEFT" }, { "name": "Sales", "value": "<% data.recruits.sales %>", "chartMarkType": "BAR", "axisPosition": "LEFT" }, { "name": "Hired Recruits", "value": "<% data.hiredRecruits %>", "chartMarkType": "LINE", "chartMarkLabel": "<% data.hiredRecruits + ' hired' %>", "axisPosition": "RIGHT" } ], "categoryDataSet": { "name": "Recruiter", "value": "<% data.recruiter %>" }, "leftAxisOptions": { "axisTitle": "Recruits" }, "rightAxisOptions": { "axisTitle": "Hired Recruits" }, "categoryAxisOptions": { "axisTitle": "Recruiters" } } ``` 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 axis. 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: DualAxisMeasurementDataSet array (Required) The numerical datasets that correspond to the Y axis. Each dataset must specify a mark type, and can specify an axis position (LEFT or RIGHT) to configure which Y axis to map the dataset to. A DualAxisMeasurementDataSet 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`. - chartMarkType Data type: MarkType enum (Required) The type of chart mark to render for this dataset. Valid values: - AREA - BAR - LINE - POINT - axisPosition Data type: AxisPosition enum The position of the Y axis for this dataset. Valid values: - LEFT (Default) - RIGHT - 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 each target line. - 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. - categoryAxisOptions Data type: CategoryAxisOptions map The options for the categorical X 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'] %>" ``` - comparisonLineLabel Data type: stringScript The label of the comparison line (shown on hover). - comparisonLineValue Data type: numberScript A number specifying the vertical position of the comparison line. The comparison line renders at this position for both axes. - 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. - leftAxisOptions Data type: DualAxisOptions map The options for the numerical Y axis on the left. Note: Although this is a numerical axis, you can't configure axisMinimum, axisMaximum, or axisIncrement for dual axis charts. A DualAxisOptions 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. - 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. - legendPosition Data type: LegendPosition enum The position where to display the legend. Valid values: - BOTTOM (default) - TOP - LEFT - RIGHT - HIDDEN - rightAxisOptions Data type: DualAxisOptions map The options for the numerical Y axis on the right. Note: Although this is a numerical axis, you can't configure axisMinimum, axisMaximum, or axisIncrement for dual axis charts. A DualAxisOptions 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. - 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. - 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. - 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.