Line Chart — lunaDOM Docs

The <luna-line-chart> component provides full-featured, responsive line charts with single and multi-series support, smooth curves, area fills, and goal lines.

Paths

/lunadom/components/line-chart/line-chart.js

REQUIRED

Single Series

Multi-Series Comparison

Smooth Curves with Area Fill

With Data Points

Goal Line

Axis Labels

Custom Height

Custom Theme

Purple Theme

Green Theme

Multi-Series with Custom Colors

Customization

Attributes
data - JSON array of data points (required)
height - Chart SVG height in pixels (default: 240)
x-label - Label below x-axis
y-label - Label along y-axis
min - Force y-axis minimum value
max - Force y-axis maximum value
goal - Draw horizontal reference/goal line
goal-label - Label for goal line (default: "Goal")
area - Fill area under lines
smooth - Render as smooth curves
dots - Show data-point dots
legend - Show series legend (multi-series)
no-grid - Hide horizontal grid lines
animate - Animate on render (default: true)
precision - Decimal places for labels

CSS Variables
--luna-line-bg - Component background (default: transparent)
--luna-line-grid-color - Horizontal grid line colour (default: rgba(255,255,255,.05))
--luna-line-axis-color - Axis line colour (default: rgba(255,255,255,.1))
--luna-line-text-color - Tick and axis label colour (default: #666)
--luna-line-color - Primary series stroke colour (default: #2563eb)
--luna-line-area-opacity - Area fill opacity (default: 0.12)
--luna-line-stroke-width - Line stroke width in px (default: 2)
--luna-line-dot-r - Dot radius in SVG units (default: 3)
--luna-line-dot-border - Dot border/stroke colour (default: var(--luna-line-bg, #0a0a0a))
--luna-line-series-colors - Comma-separated colour list for multi-series lines. Overrides the built-in palette.
--luna-line-goal-color - Reference line colour (default: #f59e0b)
--luna-line-goal-dash - SVG stroke-dasharray for the goal line (default: 5,4)
--luna-line-tooltip-bg - Tooltip background (default: #1e1e1e)
--luna-line-tooltip-fg - Tooltip text colour (default: #eee)
--luna-line-tooltip-border - Tooltip border colour (default: #333)
--luna-line-legend-gap - Gap between legend items (default: 1rem)
--luna-line-cursor-color - Vertical crosshair line colour (default: rgba(255,255,255,.1))

Events
luna-line-hover - Fired on data-point hover
luna-line-click - Fired on data-point click

Example Code

<luna-line-chart data='[ {"label": "Jan", "value": 30}, {"label": "Feb", "value": 45}, {"label": "Mar", "value": 35} ]' ></luna-line-chart>  <luna-line-chart legend data='[ {"label": "Q1", "values": {"Revenue": 45000, "Costs": 32000}}, {"label": "Q2", "values": {"Revenue": 52000, "Costs": 35000}}, {"label": "Q3", "values": {"Revenue": 61000, "Costs": 38000}} ]' ></luna-line-chart>  <luna-line-chart smooth area data='[...]' ></luna-line-chart>  <luna-line-chart smooth dots data='[...]' ></luna-line-chart>  <luna-line-chart goal="50" goal-label="Target" smooth area data='[...]' ></luna-line-chart>  <luna-line-chart x-label="Months" y-label="Sales ($)" data='[...]' ></luna-line-chart>  <luna-line-chart height="320" data='[...]' ></luna-line-chart>  <luna-line-chart smooth area data='[...]' style=" --luna-line-bg: #14001a; --luna-line-color: #c084fc; --luna-line-text-color: #a855f7; --luna-line-stroke-width: 3; " ></luna-line-chart>  <luna-line-chart legend data='[...]' style="--luna-line-series-colors: #2563eb, #f59e0b, #22c55e;" ></luna-line-chart>  <luna-line-chart no-grid data='[...]' ></luna-line-chart>  <luna-line-chart animate="false" data='[...]' ></luna-line-chart>  <luna-line-chart id="chart"></luna-line-chart> <script> const chart = document.getElementById('chart'); // Set single-series data chart.data = [ {label: 'Jan', value: 30}, {label: 'Feb', value: 45}, {label: 'Mar', value: 35} ]; // Set multi-series data chart.data = [ {label: 'Q1', values: {Revenue: 45000, Costs: 32000}}, {label: 'Q2', values: {Revenue: 52000, Costs: 35000}} ]; // Listen to events chart.addEventListener('luna-line-hover', (e) => { if (e.detail) { console.log('Hover:', e.detail.label, e.detail.value); } else { console.log('Hover ended'); } }); chart.addEventListener('luna-line-click', (e) => { console.log('Clicked:', e.detail.label, e.detail.value); }); </script>