Cartesian
Bar Chart

Bar Chart

Bar chart is a chart that represents data with rectangular bars with lengths proportional to the values that they represent.

View source

Stacked bars

You can render stacked bars by assign the same stackId to each bar.

import { BarChart } from "@lualtek/charts";
 
export default () => {
  return (
    <BarChart
      data={data}
      barCategoryGap="30%"
      barSize={4}
      series={[{
        dataKey: 'y',
        serieKeyId: 'y',
        stackId: 'stack',
        side: 'left',
      }, {
        dataKey: 'z',
        serieKeyId: 'z',
        stackId: 'stack',
        side: 'left',
      }]}
    />
  );
};

Anatomy

import { BarChart } from "@lualtek/charts";
 
export default () => {
  return (
    <BarChart
      data={data}
      series={[
        {
          dataKey: 'y',
          serieKeyId: 'y',
          side: 'left',
        }, {
          dataKey: 'z',
          serieKeyId: 'z',
          side: 'left',
        }
      ]}
    />
  );
};

API Reference

BarProps

Props for each object of the series prop.

export type BarProps<D> = {
  /**
   * The data key to assign to the line.
   */
  dataKey: string | ((data: D) => string | number);
  /**
   * Used on the map as bar id, if multiple bars use the same id they will be stacked
   */
  serieKeyId: string;
  /**
   * The stack id to assign to the bar to stack it with other bars.
   */
  stackId?: string;
  /**
   * The Y axis assigned to this line.
   */
  side: 'left' | 'right';
  /**
   * The color color of the line.
   */
  color?: string;
  /**
   * The unit assigned to the line value
   */
  unit?: string;
  /**
   * A custom name/label for the value
   */
  name?: string;
};

BarChart

This component extends the BaseChart props with the following ones.

export type BarChartProps<
  D extends Record<string, string | number | null>,
  B extends BarProps<D>
> = {
  /**
   * The data to render.
   */
  data: D[];
  /**
   * The chart series/series to render.
   */
  series: B[];
  /**
   * Whether to show the Y axis.
   *
   * @defaultValue true
   */
  showYAxis?: boolean;
  /**
   * The gap between bar groups
   *
   * @defaultValue '20%'
   */
  barCategoryGap?: string | number;
  /**
   * Set the size of the bars
   */
  barSize?: number | string;
}
Base chartLine Chart