Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Chart

Display data visualizations using Chart.js with support for multiple chart types

Basic Usage

Create a simple line chart: 
<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)',
        ]]
    ]"
/>

Chart Types

Different chart types available:

Line Chart

Bar Chart

Pie Chart

Doughnut Chart

Multiple Datasets

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

Default (Card Style)

Minimal (No Background) 


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


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

Custom Height

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

Props

Prop Type Default Description
type string line Chart type (line, bar, pie, doughnut, radar, polarArea, bubble, scatter)
data array|string [] Chart data with labels and datasets (required)
options array|string [] Chart.js options object for customization
height string 400px Chart container height
variant string default Visual style variant (default, card, minimal)

Data Structure

The data prop should follow Chart.js data structure: 
[
    '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

Chart.js Library

This component uses Chart.js for rendering. All Chart.js features and options are supported.

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.