Line Chart Component

The Line Chart component is powered by ApexCharts and provides an easy way to display data visualizations.

Basic Usage

The simplest way to use the line chart component:

<x-line-chart 
    :data="[10, 20, 15, 30, 25]" 
    :categories="['Jan', 'Feb', 'Mar', 'Apr', 'May']" />

With Currency Formatting

Add currency formatting to the y-axis and tooltips:

<x-line-chart 
    :data="[1200, 1900, 1500, 2800, 2200]" 
    :categories="['Jan', 'Feb', 'Mar', 'Apr', 'May']"
    currency="$" />

Custom Height

Adjust the chart height using the height prop:

<x-line-chart 
    :data="[10, 20, 15, 30, 25, 35, 28]" 
    :categories="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    height="350" />

Livewire Example

Use dynamic data from a Livewire component:

<x-line-chart 
    :data="$data" 
    :categories="$categories"
    currency="$"
    color="primary" />

Props Reference

Prop	Type	Default	Description
data	array	-	Required. Array of numeric values for the chart data points.
categories	array	-	Required. Array of labels for the x-axis. Should match the length of data array.
height	string	250	Height of the chart in pixels.
toolbar	bool	false	Show or hide the ApexCharts toolbar (download, zoom, etc.).
dataLabels	bool	false	Show or hide data values on each point.
currency	string|null	null	Currency symbol to prepend to values. Example: $, €, £
id	string	Auto-generated	Unique ID for the chart element. Auto-generates if not provided.
color	string	primary	Color variant for the line. Options: primary, success, danger, warning, info

References

Category	Path / Name	Description
Component	resources/views/components/line-chart.blade.php	Line Chart component file
Library	ApexCharts	Charting library used for rendering
Script	resources/js/charts.js	Charts initialization script