Chart

Simple SVG-based visualizations for your data.

Examples

Bar Chart

Jan: 40 Feb: 65 Mar: 35 Apr: 80 May: 50
Jan Feb Mar Apr May
blade 
<x-plume::chart type="bar" :data="[
    ['label' => 'Jan', 'value' => 40],
    ['label' => 'Feb', 'value' => 65],
    ['label' => 'Mar', 'value' => 35],
    ['label' => 'Apr', 'value' => 80],
    ['label' => 'May', 'value' => 50],
]" />

Line Chart

Mon: 12 Tue: 19 Wed: 3 Thu: 5 Fri: 2 Sat: 3
Mon Tue Wed Thu Fri Sat
blade 
<x-plume::chart type="line" color="text-background-600" :data="[
    ['label' => 'Mon', 'value' => 12],
    ['label' => 'Tue', 'value' => 19],
    ['label' => 'Wed', 'value' => 3],
    ['label' => 'Thu', 'value' => 5],
    ['label' => 'Fri', 'value' => 2],
    ['label' => 'Sat', 'value' => 3],
]" />
Prop Type Default Description
type string 'bar' Type of chart to render (bar, line).
data array [] Data to visualize. Array of values or associative array for labeled data.
height int 200 Height of the chart in pixels.
color string 'text-primary' Tailwind text color class for the chart elements.

Usage

blade 
<x-plume::chart :data="[10, 20, 30, 40]" />