Gauge

A semicircle for “budget used”; thresholds as ticks.

View source
$320.00of $500.00 budget
import { Gauge } from "@logicplanes/kaeso-ui";

Props

  • aria-label
    string

    The chart's accessible name ("Requests by model").

  • label
    ReactNode

    A caption under the value ("of $500.00 budget").

  • thresholds
    number[] = [0.8]

    Fractions marked as ticks on the arc ([0.8] by default). From the lowest one, the arc turns to warning.

  • value
    number

    The share used, from 0 to 1. Values above 1 fill the arc and turn it to danger.

  • valueLabel
    ReactNode

    Replaces the value in the center, which is otherwise the percentage.