Chart Waterfall Hds

<sl-chart-waterfall-hds> | SlChartWaterfallHds
Since 1.0 stable

A waterfall chart.

<sl-chart-waterfall-hds id="hds-waterfall-chart"></sl-chart-waterfall-hds>
<script>
  const waterfallChart = document.getElementById('hds-waterfall-chart');

  waterfallChart.chartTitle = "Account Activity"
  waterfallChart.popoverTheme = "light"
  waterfallChart.calculateClosingValue = true
  waterfallChart.valuePrefix = '$'
  waterfallChart.data = {
    start: { label: "Opening value", value: 100000 },
    end: { label: "Closing value", value: 111000 },
    changes: [
      { label: "Addns/wdwls", value: 5000 },
      { label: "Growth", value: 2000 },
      { label: "Income", value: -50000 },
      { label: "Another", value: 20000 },
      { label: "Yet Another", value: -12000 },
      { label: "Fees", value: -1000 }
    ]
  }
</script>

Examples

First Example

TODO

Second Example

TODO

[component-metadata:sl-chart-waterfall-hds]

Properties

Name Description Reflects Type Default
data The data to be displayed in the chart. WaterfallData { start: { label: 'Start', value: 0 }, changes: [], end: { label: 'End', value: 0 } }
chartTitle
chart-title 		The title of the chart. string ''
height The height of the chart. number 500
valuePrefix
value-prefix 		Prefix for the value string ''
valueType
value-type 		The type of the value. 'currency' | 'decimal' 'currency'
minDecimalPlaces
min-decimal-places 		The minimum number of decimal places to display. number 0
maxDecimalPlaces
max-decimal-places 		The maximum number of decimal places to display. number 2
isResponsive
responsive 		The responsiveness of the chart. boolean false
calculateClosingValue
calculate-closing-value 		Automatically calculate the closing value. boolean false
showXAxis
show-x-axis 		Show the X Axis of the chart. boolean true
selectable Selectable boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
select when an overlay bar is clicked. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.