series-provider

Charts Series Provider

The Series Provider package is a part of the LeafyGreen UI library. It provides context and utilities for managing series data in chart components.

Installation

PNPM

pnpm add @lg-charts/series-provider

Yarn

yarn add @lg-charts/series-provider

NPM

npm install @lg-charts/series-provider

Example

To use the SeriesContext, wrap your chart components with the SeriesProvider component. This will provide the necessary context for managing series data.

import { ChartCard } from '@lg-charts/chart-card';
import { Chart } from '@lg-charts/core';
import { Legend } from '@lg-charts/legend';
import { SeriesProvider } from '@lg-charts/series-provider';

const App = () => {
  const lineData = getLineData();
  const series = lineData.map(({ name }) => name);

  return (
    <SeriesProvider series={series}>
      <Legend series={series}>
      <Chart>
        {lineData.map(({ data, name }) => (
          <Line key={name} data={data} name={name} />
        ))}
      </Chart>
    </SeriesProvider>
  );
};

Props

Name	Description	Type	Default
series	An array of series names representing the data series to be displayed in the descendant charts components	Array<string>

useSeriesContext

The useSeriesContext hook provides access to the series data within the SeriesProvider context.

Example

import { useSeriesContext } from '@leafygreen-ui/series-provider';

const ChartComponent = () => {
  const {
    getSeriesIndex,
    isChecked,
    isSelectAllChecked,
    isSelectAllIndeterminate,
    toggleSeries,
    toggleSelectAll,
  } = useSeriesContext();

  // Use the series context data
};