Skip to main content
The legend displays a color-coded list of series in the chart, automatically positioned to avoid obscuring data.
The legend is created and managed automatically by the Chart class. You don’t need to instantiate LegendLayer directly—it’s an internal component. The legend automatically updates when you add or modify series.

​
How it works

When you add series to a chart with names and colors, the legend is automatically generated: 
import { Chart } from 'kinetix-charts';

const chart = new Chart(container, {
  theme: 'dark',
  series: [
    {
      type: 'line',
      name: 'Revenue', // Shows in legend
      color: '#3b82f6',
      data: [{ x: 0, y: 10 }]
    },
    {
      type: 'line',
      name: 'Expenses', // Shows in legend
      color: '#ef4444',
      data: [{ x: 0, y: 5 }]
    }
  ]
});

// Legend is automatically rendered with series names and colors

​
Controlling the legend

The legend updates automatically through the Chart API: 
// The legend updates when you modify series
chart.updateSeries(0, { 
  name: 'New Name',
  color: '#10b981' 
});

// The legend theme follows the chart theme
chart.setTheme('dark');

​
Automatic positioning

The legend intelligently positions itself to stay out of the way:
  • Default position: Top-right corner
  • On hover: Moves to opposite corner (top-right ↔ top-left)
  • Smooth behavior: Automatically recalculates bounds after moving
This ensures the legend never obscures important data points, even as users interact with the chart.

​
Theme support

The legend automatically adapts to light and dark themes:

​
Light theme (default)

  • Background: rgba(255, 255, 255, 0.8)
  • Border: #e2e8f0
  • Text: #0f172a

​
Dark theme

  • Background: rgba(15, 23, 42, 0.8)
  • Border: #334155
  • Text: #f8fafc

​
Series deduplication

The setSeries method automatically removes duplicate entries based on:
  1. Series name (if present)
  2. Series color (if no name)
  3. Falls back to “unnamed” key
This prevents the legend from showing the same series multiple times.

​
Example

import { Chart } from 'kinetix-charts';

const chart = new Chart(container, {
  theme: 'dark',
  series: [
    {
      type: 'line',
      name: 'Sales',
      color: '#10b981',
      data: salesData
    },
    {
      type: 'line',
      name: 'Target',
      color: '#f59e0b',
      data: targetData
    },
    {
      type: 'line',
      name: 'Forecast',
      color: '#8b5cf6',
      data: forecastData
    }
  ]
});

// Legend automatically displays all three series

​
Styling properties

The legend uses the following internal styling (not configurable via API):
  • Padding: 10px around content
  • Item height: 20px per series
  • Item gap: 10px between color box and text
  • Color box size: 12x12px
  • Font: 12px Inter, sans-serif
  • Border radius: 6px

​
Notes

  • The legend listens for mousemove events on its canvas to trigger repositioning
  • Bounds are recalculated on every draw for accurate hit testing
  • The legend uses roundRect for rounded corners (requires modern browsers)

Build docs developers (and LLMs) love

Get started for freeTalk to us