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`	-
`referenceLines?`	`ChartReferenceLineProps[]`	-
`gridAxis?`	`'none' \| 'x' \| 'y' \| 'xy'`	`'x'`
`legendProps?`	`LegendProps`	-
`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.

With valueFormatter and Custom Labels

Grid Axis

The gridAxis prop controls which grid lines are rendered. Accepted values are 'x' (default), 'y', 'xy', and 'none'. 'x' renders horizontal lines, 'y' renders vertical lines, 'xy' renders both. Use 'none' for a clean chart without any grid lines.

gridAxis is the recommended way to control grid line visibility. If you also pass cartesianGridProps, use it only for visual styling such as stroke, strokeDasharray, or opacity — the horizontal and vertical keys inside cartesianGridProps will be overridden by gridAxis.

Reference Lines

Reference lines can be added using the referenceLines prop. Each entry is a Recharts ReferenceLine configuration object, supporting y, x, yAxisId, stroke, strokeDasharray, label, and all other ReferenceLine props.

Legend Position

Legend position and alignment can be controlled via legendProps. Pass any Recharts Legend props directly.

<CompositeChart
  showLegend
  legendProps={{ verticalAlign: "bottom", align: "center" }}
  ...
/>

Composite Chart

On this page