x-bt-line-chart component creates elegant line charts to visualize trends over time.Supports single or multiple datasets, grid lines, axis titles, and custom styling.
Simple Line Chart
Create a basic line chart by passing an array of values to the data prop.
1<x-bt-line-chart2 :data="[10, 25, 15, 40, 30, 45, 35]"3/>Line Chart with Labels
Add labels to your data points using associative arrays with label and value keys.
Monthly Revenue
1<x-bt-line-chart 2 :data="[ 3 ['label' => 'Jan', 'value' => 120], 4 ['label' => 'Feb', 'value' => 150], 5 ['label' => 'Mar', 'value' => 90], 6 ['label' => 'Apr', 'value' => 200], 7 ['label' => 'May', 'value' => 175], 8 ['label' => 'Jun', 'value' => 220] 9 ]"10 title="Monthly Revenue"11 chart-color="emerald"12/>Multiple Datasets (Multi-line Chart)
Display multiple lines by passing an array of datasets, each with its own label, data, and color.
Financial Overview
1<x-bt-line-chart 2 :data="[ 3 [ 4 'label' => 'Sales', 5 'data' => [45, 67, 89, 78, 90, 102, 115], 6 'color' => 'blue' 7 ], 8 [ 9 'label' => 'Expenses',10 'data' => [30, 45, 50, 60, 65, 70, 75],11 'color' => 'red'12 ],13 [14 'label' => 'Profit',15 'data' => [15, 22, 39, 18, 25, 32, 40],16 'color' => 'green'17 ]18 ]"19 title="Financial Overview"20 height="h-80"21/>Line Chart with Axis Titles
Add titles to the X and Y axes for better context and customize value formatting.
Weekly Performance
1<x-bt-line-chart 2 :data="[ 3 ['label' => 'Week 1', 'value' => 2500], 4 ['label' => 'Week 2', 'value' => 3200], 5 ['label' => 'Week 3', 'value' => 2800], 6 ['label' => 'Week 4', 'value' => 4500] 7 ]" 8 title="Weekly Performance" 9 x-axis-title="Week"10 y-axis-title="Sales ($)"11 format-values="$%s"12 chart-color="amber"13 background-color="bg-gray-50 dark:bg-gray-900"14/>Minimal Line Chart Without Grid
Create a clean, minimal line chart without grid lines, points, or Y-axis labels.
1<x-bt-line-chart2 :data="[12, 19, 13, 15, 22, 23, 19]"3 :show-grid="false"4 :show-points="false"5 :show-y-axis="false"6 chart-color="purple"7 height="h-48"8/>Line Chart with Always-Visible Labels
Display data labels permanently instead of only on hover.
1<x-bt-line-chart2 :data="[34, 56, 78, 45, 67, 89]"3 data-labels="always"4 :show-points="true"5 chart-color="rose"6 height="h-72"7/>Percentage Line Chart
Track percentage-based data with custom max value and percentage formatting.
Completion Rate
1<x-bt-line-chart2 :data="[65, 75, 80, 70, 85, 90, 95]"3 :max="100"4 format-values="%s%%"5 title="Completion Rate"6 chart-color="teal"7 :border="false"8 data-labels="none"9/>Multi-line Chart with CSS Colors
Use CSS hex colors for multiple datasets with precise color control.
User Analytics
1<x-bt-line-chart 2 :data="[ 3 [ 4 'label' => 'Users', 5 'values' => [100, 150, 200, 180, 220, 250], 6 'color' => '#3b82f6' 7 ], 8 [ 9 'label' => 'Sessions',10 'values' => [150, 200, 250, 230, 280, 320],11 'color' => '#10b981'12 ]13 ]"14 title="User Analytics"15 :show-grid="true"16 height="h-96"17/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data
|
array
|
[]
|
Single dataset array or multiple datasets with 'label', 'data'/'values', and optional 'color'.
|
max
|
float|null
|
null
|
Maximum value for the Y-axis. Auto-calculated if not provided.
|
height
|
string
|
'h-64'
|
Tailwind height class for the chart container.
|
chartColor
|
mixed
|
null
|
Color(s) for lines. Can be a single color or array of colors for multiple datasets.
|
backgroundColor
|
string|null
|
null
|
Background color for the chart wrapper.
|
title
|
string|null
|
null
|
Chart title displayed at the top.
|
showGrid
|
bool
|
true
|
Whether to show grid lines (both horizontal and vertical).
|
showYAxis
|
bool
|
true
|
Whether to show Y-axis with tick labels.
|
formatValues
|
string
|
'%s'
|
Printf-style format string for value display.
|
showPoints
|
bool
|
true
|
Whether to show data point markers on the line.
|
dataLabels
|
string
|
'hover'
|
When to show data labels: 'hover', 'always', or 'none'.
|
xAxisTitle
|
string|null
|
null
|
Title for the X-axis.
|
yAxisTitle
|
string|null
|
null
|
Title for the Y-axis.
|
border
|
bool
|
true
|
Whether to show border around the chart.
|
borderColor
|
string|null
|
null
|
Custom border color (Tailwind class).
|