@kpisense/waterfall-component v1.0.0

waterfall-chart

A waterfall chart and toggle card component card for kpi dashboard.

Passing in Data

Data is passed into this chart through the Prop chartData

//waterfall-chart.tsx
@Prop() chartData: WaterfallConfig = null;

//kpi-waterfall-comparison.tsx
<waterfall-chart chartData={this._configData}></waterfall-chart>

Chart Dimensions

The chart is currently set 30% of the view port's height (30vmax). To edit further, see the height style property in the render statement.

//waterfall-chart.tsx
render() {
  return (
    <Host>
      <div id={this.getChartContainerId()} style={{ 'height': '30vmax' }}>
      </div>
    </Host>
  );
}

Label Formatting

The formatting of the labels can be edited with categoryAxis.renderer.labels.template found in the createChart() method Examples:

//waterfall-chart.tsx
createChart()
//...
  categoryAxis.renderer.labels.template.wrap = true;
  categoryAxis.renderer.labels.template.maxWidth = 95;
  categoryAxis.renderer.labels.template.fontSize = 12;
  categoryAxis.renderer.labels.template.textAlign = 'middle';

Previewing the Component

You may use <waterfall-chart> anywhere to view the component. To see the chart in a card, please try .

Toggle Button

In kpi-waterfall-comparison, clicking the button on the right in will toggle between the waterfall chart and the default data display.