Logo
Neura UI
Loading…
Logo
All pages 86

Chart

Zero-dependency canvas charts — line, bar, pie, and doughnut with dark mode and tooltips

Basic Usage

Create a simple line chart:
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

Different chart types available:
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="[...]" />

Multiple Datasets

Compare multiple datasets on the same chart:
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

Customize chart appearance and behavior:
javascript 
<neura::chart
    type="bar"
    :data="[...]"
    :options="[
        'plugins' => [
            'title' => [
                'display' => true,
                'text' => 'Monthly Sales Report',
            ],
            'legend' => [
                'display' => false,
            ],
        ],
        'scales' => [
            'y' => [
                'beginAtZero' => true,
                'ticks' => [
                    'stepSize' => 20,
                ],
            ],
        ],
    ]"
/>

Variants

Choose different visual styles for your charts:
blade

Default (Card Style)

Minimal (No Background) 

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


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

Custom Height

Adjust the chart height:
blade 
<neura::chart
    type="line"
    height="250px"
    :data="[...]"
/>

Props

Prop Type Default Description
type string line Chart type (line, bar, pie, doughnut)
data array|string [] Chart data with labels and datasets (required)
options array|string [] Options (showLegend, showGrid, showTooltip, cutout, …)
height string 400px Chart container height
variant string default Visual style variant (default, card, minimal)

Data Structure

The data prop uses labels + datasets:
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

Charts automatically adapt to dark mode with proper color schemes:

Automatic Theme Detection

The chart component automatically detects the current theme (light/dark) and adjusts text colors, grid colors, and tooltip styles accordingly. Charts will update in real-time when the theme changes.

Notes

Native canvas engine

Charts render with a zero-dependency TypeScript engine (~9 KB). For inline metrics without axes, prefer neura::sparkline or neura::bars.

Responsive

Charts are responsive by default and will adapt to container size changes.

Dynamic Updates

Charts can be updated dynamically using Alpine.js. Access the chart instance via $refs.chartCanvas.