Skip to main content

LineChart

The LineChart component visualizes data as connected line segments, ideal for showing trends over time or continuous data. It supports multiple series, dual y-axes, markers, labels, and various line styles.

Props

Data Props

data
Query | array
required
Query result or array of objects containing the data to visualize
x
string
required
Column name for the x-axis values
y
string
required
Column name for the y-axis values
series
string
Column name to group data into multiple series/lines
y2
string
Column name for secondary y-axis values

Formatting Props

xFmt
string
Format string for x-axis values (e.g., ‘pct’, ‘usd’, ’#,##0’)
yFmt
string
Format string for y-axis values
y2Fmt
string
Format string for secondary y-axis values

Chart Layout Props

title
string
Chart title displayed at the top
subtitle
string
Chart subtitle displayed below the title
legend
boolean
Whether to show the legend (default: true for series charts)
chartAreaHeight
number
Height of the chart area in pixels

Axis Props

xAxisTitle
string | boolean
Title for x-axis. Use true to use column name, string for custom title
yAxisTitle
string | boolean
Title for y-axis. Use true to use column name, string for custom title
y2AxisTitle
string | boolean
Title for secondary y-axis
xGridlines
boolean
Show vertical gridlines
yGridlines
boolean
Show horizontal gridlines
y2Gridlines
boolean
Show gridlines for secondary y-axis
xAxisLabels
boolean
Show labels on x-axis
yAxisLabels
boolean
Show labels on y-axis
y2AxisLabels
boolean
Show labels on secondary y-axis
xBaseline
boolean
Show x-axis baseline
yBaseline
boolean
Show y-axis baseline
y2Baseline
boolean
Show secondary y-axis baseline
xTickMarks
boolean
Show tick marks on x-axis
yTickMarks
boolean
Show tick marks on y-axis
y2TickMarks
boolean
Show tick marks on secondary y-axis

Axis Scale Props

xType
string
Type of x-axis: ‘category’ | ‘time’ | ‘value’
yLog
boolean
Use logarithmic scale for y-axis
yLogBase
number
Base for logarithmic y-axis (default: 10)
yMin
number
Minimum value for y-axis
yMax
number
Maximum value for y-axis
yScale
boolean
Auto-scale y-axis to data range
y2Min
number
Minimum value for secondary y-axis
y2Max
number
Maximum value for secondary y-axis
y2Scale
boolean
Auto-scale secondary y-axis to data range

Line Style Props

lineColor
string
Color for the line (hex, rgb, or theme color name)
lineType
string
Line style: ‘solid’ | ‘dashed’ | ‘dotted’
lineOpacity
number
Opacity of the line (0-1)
lineWidth
number
Width of the line in pixels
step
boolean
Use step line instead of smooth line
stepPosition
string
Position of step: ‘start’ | ‘middle’ | ‘end’

Marker Props

markers
boolean
Show markers at data points
markerShape
string
Shape of markers: ‘circle’ | ‘square’ | ‘triangle’ | ‘diamond’
markerSize
number
Size of markers in pixels

Label Props

labels
boolean
Show data labels on the line
labelSize
number
Font size for labels
labelPosition
string
Position of labels: ‘top’ | ‘bottom’ | ‘left’ | ‘right’
labelColor
string
Color for labels
labelFmt
string
Format string for labels
yLabelFmt
string
Format string for y-axis labels
y2LabelFmt
string
Format string for secondary y-axis labels
showAllLabels
boolean
Show labels for all data points (default shows subset to avoid overlap)

Series Props

colorPalette
string | array
Color palette name or array of colors for series
seriesColors
object
Object mapping series names to specific colors: {seriesName: 'color'}
seriesOrder
array
Array specifying the order of series: ['series1', 'series2']
y2SeriesType
string
Chart type for y2 series: ‘line’ | ‘bar’
seriesLabelFmt
string
Format string for series labels

Behavior Props

handleMissing
string
How to handle missing data: ‘gap’ | ‘connect’ | ‘zero’
sort
boolean
Sort data by x-axis before rendering
connectGroup
string
Connect multiple charts for synchronized tooltips/zooming

Advanced Props

echartsOptions
object
Custom ECharts configuration object to override defaults
seriesOptions
object
Custom options for series configuration
printEchartsConfig
boolean
Print ECharts config to console for debugging
renderer
string
Renderer type: ‘canvas’ | ‘svg’
downloadableData
boolean
Enable data download option
downloadableImage
boolean
Enable image download option
emptySet
string
Behavior when data is empty: ‘pass’ | ‘warn’ | ‘error’
emptyMessage
string
Custom message to display when data is empty
yAxisColor
string
Color for y-axis
y2AxisColor
string
Color for secondary y-axis
leftPadding
number
Left padding for chart area
rightPadding
number
Right padding for chart area
xLabelWrap
boolean
Wrap x-axis labels if they’re too long

Examples

Basic Line Chart

```sql orders_by_month
select date_trunc('month', order_date) as month, sum(sales) as total_sales
from orders
group by 1
order by 1

### Multiple Series

```markdown
```sql sales_by_category
select 
  date_trunc('month', order_date) as month,
  category,
  sum(sales) as total_sales
from orders
group by 1, 2
order by 1, 2

### Customized Line with Markers

```markdown
<LineChart 
  data={sales_by_category} 
  x="month" 
  y="total_sales" 
  series="category"
  lineWidth=3
  markers="true"
  markerSize=8
  yFmt="usd"
  xAxisTitle="Month"
  yAxisTitle="Revenue"
/>

Dual Y-Axis

```sql metrics
select 
  month,
  revenue,
  order_count
from monthly_metrics

### Step Line Chart

```markdown
<LineChart 
  data={inventory_levels} 
  x="date" 
  y="quantity"
  step="true"
  stepPosition="end"
  title="Inventory Levels"
/>

Custom Colors

<LineChart 
  data={sales_by_category} 
  x="month" 
  y="total_sales" 
  series="category"
  seriesColors={{
    'Electronics': 'primary',
    'Clothing': 'secondary',
    'Food': 'accent'
  }}
  seriesOrder={['Electronics', 'Clothing', 'Food']}
/>

Build docs developers (and LLMs) love