📊 Multi-Series Charts

Multiple datasets on one chart with legends, grouped bars, and stacked areas

NEW - PHASE 1

Multi-Series Line Chart

NEW

Multiple lines with auto-assigned colors from theme palette

import { LineChart } from '@chartlite/core';

new LineChart('#chart', {
  data: {
    series: [
      { name: 'Revenue', dataKey: 'revenue' },
      { name: 'Costs', dataKey: 'costs' },
      { name: 'Profit', dataKey: 'profit' }
    ],
    data: [
      { month: 'Jan', revenue: 4200, costs: 2800, profit: 1400 },
      { month: 'Feb', revenue: 4800, costs: 3200, profit: 1600 },
      { month: 'Mar', revenue: 5200, costs: 3400, profit: 1800 }
    ]
  },
  curve: 'smooth',
  showPoints: true,
  showLegend: true,
  title: 'Financial Overview'
}).render();

Grouped Bar Chart

NEW

Multiple series displayed as grouped bars side-by-side

import { BarChart } from '@chartlite/core';

new BarChart('#chart', {
  data: {
    series: [
      { name: 'Product A', dataKey: 'productA' },
      { name: 'Product B', dataKey: 'productB' },
      { name: 'Product C', dataKey: 'productC' }
    ],
    data: [
      { quarter: 'Q1', productA: 450, productB: 380, productC: 290 },
      { quarter: 'Q2', productA: 520, productB: 420, productC: 310 },
      { quarter: 'Q3', productA: 480, productB: 390, productC: 320 },
      { quarter: 'Q4', productA: 590, productB: 450, productC: 350 }
    ]
  },
  showLegend: true,
  title: 'Quarterly Sales by Product'
}).render();

Stacked Area Chart

NEW

Multiple series stacked cumulatively to show total composition

import { AreaChart } from '@chartlite/core';

new AreaChart('#chart', {
  data: {
    series: [
      { name: 'Desktop', dataKey: 'desktop' },
      { name: 'Mobile', dataKey: 'mobile' },
      { name: 'Tablet', dataKey: 'tablet' }
    ],
    data: [
      { month: 'Jan', desktop: 3200, mobile: 2100, tablet: 800 },
      { month: 'Feb', desktop: 3400, mobile: 2300, tablet: 850 },
      { month: 'Mar', desktop: 3600, mobile: 2500, tablet: 900 }
    ]
  },
  curve: 'smooth',
  fillOpacity: 0.6,
  showLegend: true,
  title: 'Traffic by Device Type'
}).render();

Multi-Series with Custom Colors

Override auto-colors with custom color palette

new LineChart('#chart', {
  data: {
    series: [
      { name: 'Series 1', dataKey: 's1', color: '#3b82f6' },
      { name: 'Series 2', dataKey: 's2', color: '#10b981' },
      { name: 'Series 3', dataKey: 's3', color: '#f59e0b' }
    ],
    data: [
      { x: 'A', s1: 30, s2: 45, s3: 25 },
      { x: 'B', s1: 40, s2: 50, s3: 30 },
      { x: 'C', s1: 35, s2: 48, s3: 35 }
    ]
  },
  curve: 'smooth',
  showLegend: true
}).render();

Multi-Series with Midnight Theme

Dark theme works great with multi-series charts

new BarChart('#chart', {
  data: {
    series: [
      { name: 'East', dataKey: 'east' },
      { name: 'West', dataKey: 'west' },
      { name: 'North', dataKey: 'north' }
    ],
    data: [
      { region: 'Jan', east: 45, west: 38, north: 32 },
      { region: 'Feb', east: 52, west: 42, north: 36 },
      { region: 'Mar', east: 48, west: 45, north: 38 }
    ]
  },
  theme: 'midnight',
  showLegend: true,
  title: 'Regional Performance'
}).render();