Gauge

Displays a single value within a range. Supports optional colour zones for thresholds.

Metric

Palette

Value 72

Data shape

Pass this structure to the :data prop.

data shape

[
    'value' => 72,
    'min'   => 0,
    'max'   => 100,
    'label' => 'Server Load',
    'zones' => [
        ['from' => 0,  'to' => 40,  'color' => '#22c55e'],
        ['from' => 40, 'to' => 70,  'color' => '#f59e0b'],
        ['from' => 70, 'to' => 100, 'color' => '#ef4444'],
    ],
]

Usage

blade

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

Treemap Histogram