Composite Chart

The CompositeChart React component combines multiple chart types—line, area, and bar—into a single, interactive visualization. Ideal for complex data comparisons, it offers full customization and responsive design.

The CompositeChart component is used to visualize data in a composite chart format. It is a wrapper around the Recharts CompositeChart component. It can contain BarChart, LineChart, and AreaChart.

Usage

import { CompositeChart } from "@sparrowengg/twigs-charts";

const Chart = () => {
  return (
    <CompositeChart
      data={[
        {
          name: "Page A",
          UV: 4000,
          PV: 2400,
          AMT: 2400,
        },
        {
          name: "Page B",
          UV: 3000,
          PV: 1398,
          AMT: 2210,
        },
        {
          name: "Page C",
          UV: 2000,
          PV: 9800,
          AMT: 2290,
        },
      ]}
      dataKey="name"
      series={[
        {
          name: "AMT",
          color: "$list.0",
          type: "bar",
        },
        {
          name: "PV",
          color: "$list.1",
          type: "line",
        },
        {
          name: "UV",
          color: "$list.2",
          type: "area",
        },
      ]}
    />
  );
};

Props

Prop	Type	Default
`barChartOptions?`	`BarChartOptions`	-
`lineChartOptions?`	`LineChartOptions`	-
`areaChartOptions?`	`AreaChartOptions`	-
`showTooltipFooter?`	`boolean`	-
`highlightOnLegendHover?`	`boolean`	`true`
`valueFormatter?`	`Function`	-
`containerProps?`	`HTMLDivElementAttributes`	-
`cartesianGridProps?`	`CartesianGridProps`	-
`rightYAxisProps?`	`YAxisProps`	-
`showRightYAxis?`	`boolean`	`false`
`yAxisLabel?`	`string`	-
`xAxisLabel?`	`string`	-
`yAxisProps?`	`YAxisProps`	-
`xAxisProps?`	`XAxisProps`	-
`showTooltip?`	`boolean`	`true`
`showLegend?`	`boolean`	`false`
`unit?`	`string`	-
`height?`	`string \| number`	`300`
`width?`	`string \| number`	`100%`
`dataKey`	`string`	-
`series?`	`CompositeChartSeries`	`[]`
`data`	`Array<Object>`	`[]`

Examples

With Legend

Custom Legend Icon

Two Y axis

You can set showRightYAxis to true to enable two y-axis. Additionally yAxisId should be added to the series object, accepted values are left and right.

With Unit and Labels

You can set unit to the series object to add a unit to the chart. You can also set label to the series object to add a label to the chart.