react-lightweight-charts-simple

A simple react wrapper for lightweight-charts library.

⚠️ This is a beta library currently, may have some breaking changes released without notice.

Installation

npm install --save react-lightweight-charts-simple lightweight-charts
// or
yarn add react-lightweight-charts-simple lightweight-charts

Usage

import React from 'react';
import { Chart, AreaSeries } from 'react-lightweight-charts';

export const App = () => {
  // Memoize data to prevent setting data multiple times
  const data = React.useMemo(() => [
    { time: '2022-02-01', value: 100 },
    { time: '2022-02-02', value: 300 },
    { time: '2022-02-03', value: 500 },
    { time: '2022-02-04', value: 700 },
    { time: '2022-02-05', value: 600 },
    { time: '2022-02-06', value: 400 },
    { time: '2022-02-07', value: 200 },
    { time: '2022-02-08', value: 500 },
    { time: '2022-02-09', value: 800 },
    { time: '2022-02-10', value: 1000 },
  ]);

  return (
    <Chart height={300}>
      <AreaSeries data={data} />
    </Chart>
  );
}

Here is also a complex example

Components

Core

These are the wrapper components for using lightweight-charts.

• <Chart />

• <Series /> (abstract type)

  Only usable inside <Chart />

  • <AreaSeries />
  • <BarSeries />
  • <BaselineSeries />
  • <CandlestickSeries />
  • <HistogramSeries />
  • <LineSeries />

• <PriceLine />

  Only usable inside <Series />

Helpers

• <Tooltip />

  Only usable inside <Chart /> or <Series />

  You can also add your custom helper components by referencing it.

Utilities

These do not render any visual, just for effect.

• <ChartAutoResizer />
• <ChartFitContentTrigger />
• <ChartOnClickSubscriber />
• <ChartOnCrosshairMoveSubscriber />
• <TimeScaleOnSizeChangeSubscriber />
• <TimeScaleOnVisibleTimeRangeChangeSubscriber />
• <TimeScaleOnVisibleLogicalRangeChangeSubscriber />
• <SeriesHoverDataSubscriber />

You can also add your custom utility components by referencing any one of the above.

Hooks

• useChart() to get IChartApi object and container div reference.
• useSeries() to get ISeriesApi object.

License

MIT