@lg-charts/core v0.8.1

Core Chart Components

Library of composable charting components that provides a way to create interactive charts rendered on canvas.

Installation

Yarn

yarn add @lg-charts/core

NPM

npm install @lg-charts/core

Basic Chart Example

import { Chart, ChartGrid, ChartHeader, Line, XAxis, YAxis, type ChartStates } from '@lg-charts/core';

<Chart onZoomSelect={handleZoom} state={ChartStates.Unset}>
  <ChartHeader title="My Chart" />
  <ChartGrid vertical={false}>
  <XAxis type="time" />
  <YAxis type="value" formatter={(value) => `${value}GB`} />
  <EventMarkerPoint
    label='2024/01/04 (value 3)'
    message='Critical event occurred'
    position={[new Date(2020, 01, 04), 3]}
    level='warning'
  />
  <EventMarkerLine
    label='2024/01/02'
    message='Something happened of note'
    position={new Date(2020, 01, 02)}
    level='info'
  />
  <ThresholdLine
    position={3}
    label='Value Limit'
    value='3'
  />
  <Line
    name="Series 1"
    data={[
      [new Date(2020, 01, 01), 0],
      [new Date(2020, 01, 02), 1],
      [new Date(2020, 01, 03), 2],
      [new Date(2020, 01, 04), 3],
      [new Date(2020, 01, 05), 4],
    ]}
  />
  <Line
    name="Series 2"
    data={[
      [new Date(2020, 01, 01), 4],
      [new Date(2020, 01, 02), 3],
      [new Date(2020, 01, 03), 2],
      [new Date(2020, 01, 04), 1],
      [new Date(2020, 01, 05), 0],
    ]}
  />
</Chart>;

Parent Components

Chart

Chart container component.

Props

Note: Callback passed to onZoomSelect callback receives the following ZoomSelectionEvent as an argument:

ZoomSelectionEvent = {
  // present if xAxis is enabled
  xAxis?: { startValue: number; endValue: number };
  // present if yAxis is enabled
  yAxis?: { startValue: number; endValue: number };
}

Child Components

Line

Component that takes in data points and renders a single line on the chart.

Props

ChartHeader

Component for rendering a header in a chart.

Props

ChartGrid

Component that displays grid lines on the chart.

Props

XAxis

Renders an x-axis.

Props

YAxis

Renders a y-axis.

Props

ChartTooltip

Renders a tooltip onto the chart.

Props

Note: SeriesInfo is of type { name: string; value: string | number | Date; }

EventMarkerLine

Renders a vertical line marker at a specific point on the x-axis to annotate an event.

Props

EventMarkerPoint

Renders a point marker at specific coordinates to annotate an event.

Props

ThresholdLine

Renders a horizontal dashed line at a specific value on the y-axis to indicate a threshold.

Props