LineChart
TheLineChart 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
Query result or array of objects containing the data to visualize
Column name for the x-axis values
Column name for the y-axis values
Column name to group data into multiple series/lines
Column name for secondary y-axis values
Formatting Props
Format string for x-axis values (e.g., ‘pct’, ‘usd’, ’#,##0’)
Format string for y-axis values
Format string for secondary y-axis values
Chart Layout Props
Chart title displayed at the top
Chart subtitle displayed below the title
Whether to show the legend (default: true for series charts)
Height of the chart area in pixels
Axis Props
Title for x-axis. Use
true to use column name, string for custom titleTitle for y-axis. Use
true to use column name, string for custom titleTitle for secondary y-axis
Show vertical gridlines
Show horizontal gridlines
Show gridlines for secondary y-axis
Show labels on x-axis
Show labels on y-axis
Show labels on secondary y-axis
Show x-axis baseline
Show y-axis baseline
Show secondary y-axis baseline
Show tick marks on x-axis
Show tick marks on y-axis
Show tick marks on secondary y-axis
Axis Scale Props
Type of x-axis: ‘category’ | ‘time’ | ‘value’
Use logarithmic scale for y-axis
Base for logarithmic y-axis (default: 10)
Minimum value for y-axis
Maximum value for y-axis
Auto-scale y-axis to data range
Minimum value for secondary y-axis
Maximum value for secondary y-axis
Auto-scale secondary y-axis to data range
Line Style Props
Color for the line (hex, rgb, or theme color name)
Line style: ‘solid’ | ‘dashed’ | ‘dotted’
Opacity of the line (0-1)
Width of the line in pixels
Use step line instead of smooth line
Position of step: ‘start’ | ‘middle’ | ‘end’
Marker Props
Show markers at data points
Shape of markers: ‘circle’ | ‘square’ | ‘triangle’ | ‘diamond’
Size of markers in pixels
Label Props
Show data labels on the line
Font size for labels
Position of labels: ‘top’ | ‘bottom’ | ‘left’ | ‘right’
Color for labels
Format string for labels
Format string for y-axis labels
Format string for secondary y-axis labels
Show labels for all data points (default shows subset to avoid overlap)
Series Props
Color palette name or array of colors for series
Object mapping series names to specific colors:
{seriesName: 'color'}Array specifying the order of series:
['series1', 'series2']Chart type for y2 series: ‘line’ | ‘bar’
Format string for series labels
Behavior Props
How to handle missing data: ‘gap’ | ‘connect’ | ‘zero’
Sort data by x-axis before rendering
Connect multiple charts for synchronized tooltips/zooming
Advanced Props
Custom ECharts configuration object to override defaults
Custom options for series configuration
Print ECharts config to console for debugging
Renderer type: ‘canvas’ | ‘svg’
Enable data download option
Enable image download option
Behavior when data is empty: ‘pass’ | ‘warn’ | ‘error’
Custom message to display when data is empty
Color for y-axis
Color for secondary y-axis
Left padding for chart area
Right padding for chart area
Wrap x-axis labels if they’re too long