Neura UI

Loading…

Logo
Neura UI
All pages 99

Chart

Line, bar, pie, doughnut, donut, waffle, and slope charts. Labels stay inside the frame, a donut keeps its total in the center, and a waffle counts every share.

Basic Usage

Pass labels and one dataset. The line is smooth, the fill fades toward the baseline, and the month labels sit inside the frame.
javascript 
<neura::chart
    type="line"
    :data="[
        'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        'datasets' => [[
            'label' => 'Sales',
            'data' => [12, 19, 3, 5, 2, 3],
            'borderColor' => 'rgb(99, 102, 241)',
            'backgroundColor' => 'rgba(99, 102, 241, 0.1)',
            'fill' => true,
        ]]
    ]"
/>

Chart Types

line, bar, pie, and doughnut. Hover a bar or a slice and the others fade. A doughnut shows the total until the pointer rests on a slice, then that slice’s name and value. donut is the same ring. Waffle and slope are further down.
blade

Line Chart

Bar Chart

Pie Chart

Doughnut Chart 

<neura::chart type="line" :data="[...]" />
<neura::chart type="bar" :data="[...]" />
<neura::chart type="pie" :data="[...]" />
<neura::chart type="doughnut" :data="[...]" />
<neura::chart type="donut" :data="[...]" />
<neura::chart type="waffle" :data="[...]" />
<neura::chart type="slope" :data="[...]" />

Multiple Datasets

Datasets share the same labels. Each keeps its color in the legend and in the tooltip. The legend wraps when the names no longer fit on one line.
javascript 
<neura::chart
    type="line"
    :data="[
        'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        'datasets' => [
            [
                'label' => '2023',
                'data' => [12, 19, 3, 5, 2, 3],
                'borderColor' => 'rgb(99, 102, 241)',
            ],
            [
                'label' => '2024',
                'data' => [2, 3, 20, 5, 1, 4],
                'borderColor' => 'rgb(139, 92, 246)',
            ],
        ]
    ]"
/>

Custom Options

A title sits above the legend. Hide the legend with plugins.legend.display. Positive values already start the axis at zero.
javascript 
<neura::chart
    type="bar"
    :data="[...]"
    :options="[
        'plugins' => [
            'title' => [
                'display' => true,
                'text' => 'Monthly Sales Report',
            ],
            'legend' => [
                'display' => false,
            ],
        ],
    ]"
/>

Variants

default and card use the surface frame. minimal drops the border and the shadow. Rounded corners and shadow come from the chart config.
blade

Default (Card Style)

Minimal (No Background) 

<neura::chart variant="default" ... />


<neura::chart variant="minimal" ... />

Custom Height

height sets the frame. Axis labels and the legend stay inside it when the chart gets shorter.
blade 
<neura::chart
    type="line"
    height="250px"
    :data="[...]"
/>

Waffle, slope, and donut

A waffle counts shares on a ten by ten grid, one cell per percent, filled column by column from the bottom left. A slope compares two moments and shows how the rank moved. A donut keeps the total in the center until a slice is hovered.
javascript

Waffle chart

Slope chart

Donut chart 

<neura::chart
    type="waffle"
    :options="['unit' => 'TWh']"
    :data="[
        'labels' => ['Wind and solar', 'Hydro', 'Gas', 'Coal', 'Other'],
        'datasets' => [['data' => [218, 20, 76, 132, 56]]],
    ]"
/>

<neura::chart
    type="slope"
    :options="['startLabel' => 'Q1', 'endLabel' => 'Q2', 'unit' => '%']"
    :data="[
        'datasets' => [
            ['label' => 'Email', 'data' => [3.1, 4.6], 'borderColor' => 'rgb(99, 102, 241)'],
            ['label' => 'Direct', 'data' => [3.9, 3.7]],
        ],
    ]"
/>

<neura::chart
    type="donut"
    :data="[
        'labels' => ['Search', 'Direct', 'Social'],
        'datasets' => [['data' => [16840, 8120, 2910]]],
    ]"
/>

Props

Prop Type Default Description
type string line Chart type (line, bar, pie, doughnut, donut, waffle, slope)
data array|string [] Chart data with labels and datasets (required)
options array|string [] Legend, grid, tooltip, title, cutout, unit, rows, columns, startLabel, endLabel
height string 400px Chart container height
variant string default Frame style: default, card, or minimal

Data Structure

labels are the categories. Each dataset has a name, values, and a color. Use fill on a line when the area should fade to the baseline.
JavaScript 
[
    'labels' => ['Label 1', 'Label 2', 'Label 3'],
    'datasets' => [
        [
            'label' => 'Dataset 1',
            'data' => [10, 20, 30],
            'borderColor' => 'rgb(99, 102, 241)',
            'backgroundColor' => 'rgba(99, 102, 241, 0.1)',
        ],
    ],
]

Dark Mode Support

Axis text, the grid, and the tooltip follow the current theme. Switching light and dark redraws the chart.

Theme

Text uses the foreground color, the grid stays quiet, and the tooltip uses the raised surface. No extra dark palette is required.

Notes

Native canvas engine

Charts draw on a canvas. For a metric without axes, use neura::sparkline or neura::bars.

Responsive

The chart resizes with its frame. Category labels that would collide are skipped, and the first and last labels keep their room.

Updates

Call update on the Alpine chart with new labels and datasets. The axes and the legend measure themselves again.