GenericChart

A Recharts-based chart component that renders bar, line, area, pie, donut, composed, radar, scatter, and table charts from a unified ChartConfig object.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { GenericChart } from "@xocialive/ui-components";

Basic usage

import { GenericChart } from "@xocialive/ui-components";
import type { ChartConfig } from "@xocialive/ui-components";

const config: ChartConfig = {
  type: "bar",
  title: "Monthly Revenue",
  data: [
    { month: "Jan", revenue: 42000 },
    { month: "Feb", revenue: 55000 },
    { month: "Mar", revenue: 48000 },
  ],
  series: [{ dataKey: "revenue", name: "Revenue" }],
  xAxis: { dataKey: "month" },
  legend: { show: true },
};

<GenericChart config={config} />;

Chart types

type	Description
"bar"	Vertical or horizontal bar chart
"line"	Line chart
"area"	Area chart
"pie"	Pie / donut chart

Props

Prop	Type	Default	Description
type	ChartType	—	Chart variant
data	object[]	—	Data array
xKey	string	—	Key used for the x-axis / pie labels
series	SeriesConfig[]	—	Series definitions
height	number	250	Chart height in pixels
colors	string[]	CHART_COLORS	Colour array
showLegend	boolean	true	Toggle legend visibility
showGrid	boolean	true	Toggle background grid lines
sx	SxProps<Theme>	—	Wrapper style overrides