Charts / Waterfall

Waterfall

Running total with incremental additions and subtractions. Mark the last bar with type: total.

Scenario

Palette

Data shape

Pass this structure to the :data prop.

data shape

[
    ['label' => 'Opening',   'value' =>  5000],
    ['label' => 'Revenue',   'value' =>  8500],
    ['label' => 'COGS',      'value' => -3200],
    ['label' => 'Payroll',   'value' => -4100],
    ['label' => 'Closing',   'value' =>     0, 'type' => 'total'],
]

Usage

blade

<x-tayo::chart
    type="waterfall"
    :data="$data"
    :height="420"
    colors="default"
/>

Histogram Funnel