📈 Basic Examples

Explore LineChart, BarChart, and AreaChart with different themes and configurations

Basic Line Chart

Simple line chart with default settings and theme

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

new LineChart('#chart', {
  data: [
    { x: 'Jan', y: 30 },
    { x: 'Feb', y: 45 },
    { x: 'Mar', y: 38 },
    { x: 'Apr', y: 52 },
    { x: 'May', y: 48 },
  ],
}).render();

Smooth Curve

Line chart with smooth bezier curves

new LineChart('#chart', {
  data: [
    { x: 'Jan', y: 30 },
    { x: 'Feb', y: 45 },
    { x: 'Mar', y: 38 },
  ],
  curve: 'smooth',
  showPoints: true,
}).render();

Midnight Theme

Dark theme perfect for dashboards

new LineChart('#chart', {
  data: [
    { x: 'Jan', y: 30 },
    { x: 'Feb', y: 45 },
    { x: 'Mar', y: 38 },
  ],
  theme: 'midnight',
  curve: 'smooth',
}).render();

Vertical Bar Chart

Simple vertical bar chart showing quarterly data

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

new BarChart('#chart', {
  data: [
    { x: 'Q1', y: 45000 },
    { x: 'Q2', y: 52000 },
    { x: 'Q3', y: 48000 },
    { x: 'Q4', y: 61000 },
  ],
}).render();

Horizontal Bar Chart

Bar chart with horizontal orientation

new BarChart('#chart', {
  data: [
    { x: 'Product A', y: 320 },
    { x: 'Product B', y: 280 },
    { x: 'Product C', y: 245 },
  ],
  orientation: 'horizontal',
}).render();

Area Chart

Filled area chart with smooth curves

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

new AreaChart('#chart', {
  data: [
    { x: 'Mon', y: 120 },
    { x: 'Tue', y: 150 },
    { x: 'Wed', y: 180 },
    { x: 'Thu', y: 170 },
    { x: 'Fri', y: 200 },
  ],
  curve: 'smooth',
  fillOpacity: 0.3,
}).render();