multiline-chart

A lightweight, dependency-free multi-line time-series chart, packaged as a native Web Component. It renders multiple data series on a <canvas> with interactive hover scrubbing, a live legend, and full responsive/touch support.

Everything (markup, styles, and rendering logic) is encapsulated in a single custom element, <multi-line-chart>, using Shadow DOM, so it drops into any page or framework without style leakage and without external libraries.

Features

• Zero runtime dependencies – just plain TypeScript compiled to JavaScript.
• Canvas rendering – crisp lines on any screen via devicePixelRatio scaling.
• Interactive hover – a tracking line, date tooltip, on-line value dots, and spread-out labels that avoid overlapping.
• Live legend – shows the current value per series and updates as you hover.
• Responsive – redraws on window resize and adapts label sizing/alignment on small screens.
• Touch support – scrub the chart on mobile; taps still pass through, drags prevent page scroll.
• Dynamic Y-axis scaling – axis bounds are computed from the data and rounded to clean intervals.
• Sparse-data friendly – series can have different/missing dates; missing points are interpolated for hover markers.
• Encapsulated styling – CSS is bundled into the component via Shadow DOM.
• Customizable title and logo – via the title attribute and a logo slot.

Project structure

multiline-chart/
├── src/
│   ├── index.ts          # MultiLineChart custom element (all chart logic)
│   ├── style.css         # Component styles (source of truth)
│   └── chart-styles.ts   # AUTO-GENERATED from style.css (do not edit)
├── scripts/
│   └── inject-styles.js  # Inlines style.css into chart-styles.ts at build time
├── dist/                 # Compiled output (generated by build)
├── package.json
└── tsconfig.json

The build has two steps (wired together in the build script):

1. scripts/inject-styles.js reads src/style.css and writes it into src/chart-styles.ts as an exported CHART_CSS string. This bundles the CSS into the JS output without needing a CSS-aware bundler.
2. tsc compiles the TypeScript in src/ to dist/.

Getting started

Prerequisites

• Node.js and npm

Install

npm install

Build

npm run build

This regenerates src/chart-styles.ts from src/style.css and compiles the TypeScript into dist/.

Usage

Import the compiled module and register the element, then use the <multi-line-chart> tag in your HTML.

<multi-line-chart title="Market Share">
  <!-- optional: any markup projected into the header logo slot -->
  <img slot="logo" src="logo.svg" alt="Logo" width="120" />
</multi-line-chart>

<script type="module">
  import { MultiLineChart } from './dist/index.js';

  // Register the <multi-line-chart> custom element.
  MultiLineChart.initialize();

  const chart = document.querySelector('multi-line-chart');

  chart.setData([
    {
      name: 'Series A',
      data: [
        { date: '2024-01-01', value: 0.42 },
        { date: '2024-02-01', value: 0.45 },
        { date: '2024-03-01', value: 0.51 },
      ],
    },
    {
      name: 'Series B',
      data: [
        { date: '2024-01-01', value: 0.30 },
        { date: '2024-02-01', value: 0.28 },
        { date: '2024-03-01', value: 0.35 },
      ],
    },
  ]);
</script>

You can call setData() before the element is attached to the DOM; the data is buffered and rendered once it connects.

API

MultiLineChart.initialize()

Static method that registers the custom element under the tag name multi-line-chart (no-op if already registered).

setData(lines)

Sets the chart data and triggers a render.

interface DataPoint {
  date: string;  // any value parseable by `new Date(...)`
  value: number; // fractional value; rendered as a percentage (value * 100)
}

interface InputLine {
  name: string;       // series name shown in the legend / hover labels
  data: DataPoint[];
}

setData(lines: InputLine[]): void;

Notes:

• value is treated as a fraction and displayed as a percentage (e.g. 0.42 renders as 42%).
• Series are sorted by their leading value and assigned colors automatically from the built-in color scheme.
• Dates are unioned across all series; gaps within a series are interpolated for hover markers.

title attribute

Sets the header title. Changing it after render updates the header in place.

<multi-line-chart title="Quarterly Revenue"></multi-line-chart>

logo slot

Project arbitrary markup (e.g. an inline SVG or image) into the header's logo area using slot="logo".

Development

• Edit styles in src/style.css (not src/chart-styles.ts, which is generated).
• Run npm run build after changes to regenerate styles and recompile.

License

ISC