IxDF Design System

“Circular Meter” Component

A circular meter is a configurable widget that we can use to display statistics in a human-friendly way. It consists mainly of a circular dial (or progress) representing a percentile, or part-to-whole relationship.

A Label
36%
This is a description of this information.

Usage

@include('components.charts.circularMeter', [
    'percentage' => 36,
    'label' => 'A Label',
    'description' => 'This is a description of this information.',
])

Props

  • percentage (required)
    int

    Percentage value.

  • displayValue
    int

    If specified, will be used instead of $percentValue as display value.

  • label
    string

    Label for the meter.

  • units
    string

    A string representing the display units i.e. "%", "lbs.", "Kms".

  • description
    string

    Description of meter.

  • size
    string

    Size of circular meter, other option: "small".

    Default Value: default

  • thresholds
    array<int, int>

    Thresholds for deciding whether percentage will be red, orange or green.

    Default Value: [50, 75]