--- 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: waterfallChart2 layout: subsection wd_wcptag: waterfallChart2 --- Displays a chart with a progression of data. You can specify first, intermediate, and last steps, which display as bars on the chart. Each bar indicates the amount of increase or decrease from its preceding measurement. Use `waterfallChart2` on view pages and as a view-only widget on edit pages. `waterfallChart2` doesn't update when the data changes on an edit page. ## Examples This sample `waterfallChart2` displays the months on the X axis and the number of hired workers on the Y axis. This chart uses the default colors to indicate the increase and decrease in measurements. ![](GUID-d01f4ba8-d9cd-4da9-9319-59c8830e7f99-enHYPHENus.png) ``` { "type": "waterfallChart2", "data": "<% chartData.getChartData() %>", "dataVariableName": "data", "measurementDataSet": { "name": "hiredRecruits", "value": "<% data.hiredRecruits %>", "chartMarkLabel": "<% data.region %>" }, "categoryDataSet": { "name": "month", "value": "<% data.month %>" }, "measurementAxisOptions": { "axisTitle": "Hired Recruits" }, "categoryAxisOptions": { "axisTitle": "Month" } } ``` This next sample `waterfallChart2` displays the same data using custom colors that indicate the increase and decrease, along with the start and end markers. ![](GUID-95c913ae-3c5e-42fe-ba39-cbdcbd38d606-enHYPHENus.png) ``` { "type": "waterfallChart2", "id": "waterfallChartExample2", "data": "<% chartData.getChartData() %>", "dataVariableName": "data", "accentFirstMark": true, "appendEndMark": true, "colors": "<% ['indigo', '#63a6f7', 'red', 'purple'] %>", "measurementDataSet": { "name": "hiredRecruits", "value": "<% data.hiredRecruits %>", "chartMarkLabel": "<% data.region %>" }, "categoryDataSet": { "name": "month", "value": "<% data.month %>" }, "measurementAxisOptions": { "axisTitle": "Hired Recruits" }, "categoryAxisOptions": { "axisTitle": "Month" } } ``` 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. - measurementDataSet Data type: LabeledMeasurementDataSet map (Required) The numerical dataset. These measurements correspond to the Y axis and determine the size of the chart marks. 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. - 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. - accentFirstMark Data type: boolean If true, the chart designates the first bar as the start of the waterfall steps, and accents it with a different color and a legend. The default is false. By default, the chart uses a color from the standard palette. To use a different color for the first mark, specify the `colors` attribute. The 1st color in `colors[]` is the color for the first mark. Note: If you specify the `colors` attribute, it must contain 4 colors, regardless of the `accentFirstMark` setting. - appendEndMark Data type: boolean If true, the chart adds a bar after the last waterfall step, and assigns it a different color and a legend. The default is false. By default, the chart uses a color from the standard palette. To use a different color for the end mark, specify the `colors` attribute. The 4th color in `colors[]` is the color for the end mark. Note: If you specify the `colors` attribute, it must contain 4 colors, regardless of the `appendEndMark` setting. - 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 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 The color palette for `waterfallChart2`. By default, `waterfallChart2` uses the standard color palette of the chart 2.0 widgets. To override the default colors, specify 4 colors (CSS color names or hex values) in this sequence: ``` [ startColor, increaseColor, decreaseColor, endColor ] ``` Specify the exact sequence of colors regardless of the `accentFirstMark` and `appendEndMark` attribute settings. Notes: - If you don't set the `accentFirstMark` and `appendEndMark` attributes, `waterfallChart2` ignores the 1st and 4th colors in `colors[]`. - If you specify more than 4 colors, `waterfallChart2` ignores the additional colors. - If you specify an incorrect color or hex value, it displays as black. - 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 for `waterfallChart2` 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. - 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. - 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.