Cartesian
Line Chart

Line Chart

Line chart is a simple cartesian chart that displays data points connected by lines.

View source

With areas

You can render areas with the showAreas prop. This will fill the area between the line and the bottom of the chart.

  <LineChart
    showAreas
    data={...}
    series={...}
  />

Bi Axial

Line chart can have multiple Y. This means that you can have lines with different scales.

  <LineChart
    data={...}
    series={[
      {
        dataKey: 'temperature',
        serieKeyId: 'temperature',
        side: 'left',
        unit: '°C',
        name: 'Temperature',
      },
      {
        dataKey: 'pressure',
        serieKeyId: 'pressure',
        side: 'right',
        unit: 'mbar',
        name: 'Pressure',
      }
      // ...
    ]}
  />

Anatomy

import { LineChart } from "@lualtek/charts";
 
export default () => {
  return (
    <LineChart
      data={data}
      series={[
        {
          // The key of the data to display
          dataKey: 'y',
          // The unique id of the serie
          serieKeyId: 'yid',
          // The Y axis to use
          side: 'left',
        }
      ]}
    />
  );
};

API Reference

LineProps

Props for each object of the series prop.

export type LineProps<D> = {
  /**
   * The data key to assign to the line.
   */
  dataKey: string | ((data: D) => string | number);
  /**
   * Used on the map as linekey id, should be unique
   */
  serieKeyId: string;
  /**
   * The Y axis assigned to this line.
   */
  side: 'left' | 'right';
  /**
   * The stroke color of the line.
   */
  color?: string;
  /**
   * The type of the line.
   *
   * @defaultValue 'monotone'
   */
  type?: ReLineProps['type'];
  /**
   * The unit assigned to the line value
   */
  unit?: string;
  /**
   * A custom name/label for the value
   */
  name?: string;
};

LineChart

This component extends the BaseChart props with the following ones.

export type LineChartProps<
  D extends Record<string, string | number | null>,
  L extends LineProps<D>
> = {
  /**
   * The data to render.
   */
  data: D[];
  /**
   * The chart series/series to render.
   */
  series: L[];
  /**
   * Whether to show the dots on the series.
   *
   * @defaultValue false
   */
  showDots?: boolean;
  /**
   * Whether to show the Y axis.
   *
   * @defaultValue true
   */
  showYAxis?: boolean;
  /**
   * Render areas for the series.
   */
  showAreas?: boolean;
}
Bar ChartBlank Button