||

Composed Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Static, beautifully designed composed charts combining bars and lines

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/recharts-composed-chart

Usage

<EvilComposedChart> is the container; compose the parts you need — <EvilComposedChart.Grid>, <EvilComposedChart.XAxis>, <EvilComposedChart.YAxis>, <EvilComposedChart.Legend>, <EvilComposedChart.Tooltip>, and one or more <EvilComposedChart.Bar> and <EvilComposedChart.Line> — as children. Each <Bar> carries its own variant, glow, and isClickable; each <Line> its own strokeVariant, curveType, glow, and isClickable, so one chart can mix bar and line styles freely.

import { EvilComposedChart } from "@/components/evilcharts/charts/recharts-composed-chart";
import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart";
const chartConfig = {
  revenue: {
    label: "Revenue",
    colors: { light: ["#3b82f6"], dark: ["#6A5ACD"] },
  },
  profit: {
    label: "Profit",
    colors: { light: ["#10b981"], dark: ["#34d399"] },
  },
} satisfies ChartConfig;
 
<EvilComposedChart xDataKey="month" data={data} config={chartConfig}>
  <EvilComposedChart.Grid />
  <EvilComposedChart.XAxis dataKey="month" />
  <EvilComposedChart.YAxis />
  <EvilComposedChart.Legend isClickable />
  <EvilComposedChart.Tooltip />
  <EvilComposedChart.Bar dataKey="revenue" variant="gradient" isClickable />
  <EvilComposedChart.Line dataKey="profit" strokeVariant="dashed" isClickable>
    <EvilComposedChart.Dot variant="default" />
    <EvilComposedChart.ActiveDot variant="colored-border" />
  </EvilComposedChart.Line>
</EvilComposedChart>

Interactive Selection

Add isClickable to any <Bar>, <Line>, or <Legend> to make those series selectable. Handle selection with the onSelectionChange callback on <EvilComposedChart>:

<EvilComposedChart
  data={data}
  config={chartConfig}
  onSelectionChange={(selectedDataKey) => {
    if (selectedDataKey) {
      console.log("Selected:", selectedDataKey);
    } else {
      console.log("Deselected");
    }
  }}
>
  <EvilComposedChart.XAxis dataKey="month" />
  <EvilComposedChart.Legend isClickable />
  <EvilComposedChart.Tooltip />
  <EvilComposedChart.Bar dataKey="revenue" isClickable />
  <EvilComposedChart.Line dataKey="profit" isClickable />
</EvilComposedChart>

Loading State

isLoading={true}

Examples

Customize each <Bar> with a variant, and each <Line> with a strokeVariant, curveType, and more.

Gradient Colors

gradient colors

Bar Variants

<Bar variant='hatched' />
<Bar variant='duotone' />
<Bar variant='gradient' />
<Bar variant='stripped' />

Line Stroke Variants

<Line strokeVariant='dashed' />
<Line strokeVariant='animated-dashed' />

Curve Types

<Line curveType='bump' />

Line Dots

<Dot /> and <ActiveDot />

Hover Highlight

<Bar enableHoverHighlight />

Glowing Effects

<Bar glow /> and <Line glow />

API Reference

The props below are grouped by the component they belong to.

EvilComposedChart

The root container. It owns the data, shared selection state, loading skeleton, and optional brush; everything visual is composed as its children.

PropTypeDefaultDescription
data*TData[]–

The chart data — an array of objects, one per data point (TData extends Record<string, unknown>).

config*Record<string, ChartConfig[string]>–

Defines every bar and line series. Each key matches a data key in your data, with a corresponding color or color array.

children*ReactNode–

The composed chart parts — <Grid />, <XAxis />, <YAxis />, <Legend />, <Tooltip />, and one or more <Bar /> and <Line />.

classNamestring–

Extra CSS classes for the chart container.

curveType"basis" | "bumpX" | "bumpY" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | …"linear"

Default curve interpolation for every <Line />; each can override it locally.

animationTypenone|left-to-right|right-to-left|center-out|edges-in"left-to-right"

Default intro for every <Bar /> and <Line /> — lines wipe in along this direction, bars grow from their baseline staggered in this order. "none" disables it; OS reduce-motion falls back to "none" automatically.

barGapnumber–

Gap between bars in the same category.

barCategoryGapnumber–

Gap between bar categories.

defaultSelectedDataKeystring | nullnull

The data key selected by default.

onSelectionChange(selectedDataKey: string | null) => void–

Fires when a series is selected or deselected by clicking a clickable <Bar />, <Line />, or <Legend /> entry. Receives the selected data key, or null when deselected.

isLoadingbooleanfalse

Shows a skeleton with a shimmer effect while data is being fetched.

loadingBarsnumber12

Number of bars in the loading skeleton.

xDataKeykeyof TData & string–

The x-axis data key. Only needed by the brush footer — the axis reads its own key from <XAxis dataKey="…" />.

chartPropsComponentProps<typeof ComposedChart>–

Extra props forwarded to the underlying Recharts ComposedChart. See the Recharts ComposedChart documentation for available props.

Bar

A single bar series. Each <Bar /> generates its own gradient/pattern definitions, so a chart can hold any number of bars — each with its own variant, glow, and clickability.

PropTypeDefaultDescription
dataKey*string–

The series key. Must exist on both the data rows and the chart config.

variantdefault|hatched|duotone|duotone-reverse|gradient|stripped"default"

The bar fill's visual style. Applies to this bar only.

radiusnumber4

The bar's corner radius, in pixels.

animationTypenone|left-to-right|right-to-left|center-out|edges-in–

The grow-in order for this bar series. Falls back to the chart's animationType when omitted.

glowbooleanfalse

Applies a soft outer neon glow to this bar.

isClickablebooleanfalse

Makes this bar selectable on click. When any series is selected, unselected series become semi-transparent.

enableHoverHighlightbooleanfalse

When set, hovering a column dims the other bars, making it easier to focus on specific data points.

barPropsComponentProps<typeof Bar>–

Escape hatch for raw props forwarded to the underlying Recharts Bar.

Line

A single line series. Each <Line /> generates its own color gradient and glow filter, so a chart can hold any number of lines — each with its own stroke, curve, glow, and clickability.

PropTypeDefaultDescription
dataKey*string–

The series key. Must exist on both the data rows and the chart config.

strokeVariantsolid|dashed|animated-dashed"solid"

The stroke style for this line.

curveType"basis" | "bump" | "linear" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | "stepBefore" | "stepAfter" | …–

The curve interpolation for this line. Falls back to the chart's curveType when omitted.

animationTypenone|left-to-right|right-to-left|center-out|edges-in–

The intro reveal direction for this line. Falls back to the chart's animationType when omitted.

connectNullsbooleanfalse

Whether to connect line segments across null or missing values.

glowbooleanfalse

Applies a soft outer neon glow to this line.

isClickablebooleanfalse

Makes this line selectable on click. When any series is selected, unselected series become semi-transparent.

childrenReactNode–

Optional <Dot /> and <ActiveDot /> that add point markers to this line.

linePropsComponentProps<typeof Line>–

Escape hatch for raw props forwarded to the underlying Recharts Line.

Dot and ActiveDot

Point markers composed inside a <Line />. <Dot /> is the resting marker; <ActiveDot /> is the hovered marker. They render nothing on their own — the parent <Line /> reads their variant.

PropTypeDefaultDescription
variantdefault|border|colored-border–

The visual style of the point marker.

XAxis and YAxis

The category and value axes. Both ship with the chart's flat default styling and forward every Recharts axis prop — dataKey, tickFormatter, tickMargin, etc. pass straight through. They hide automatically while the chart is loading.

PropTypeDefaultDescription
dataKeystring–

The data key for the axis values.

…axisProps––

Every other Recharts XAxis / YAxis prop is forwarded as-is. See the Recharts XAxis and Recharts YAxis docs for available props.

Grid

The background grid lines. Defaults to horizontal-only dashed lines and forwards every Recharts CartesianGrid prop.

PropTypeDefaultDescription
…gridProps––

Every Recharts CartesianGrid prop is forwarded as-is. See the Recharts CartesianGrid documentation for available props.

Tooltip

The hover tooltip. It reads the chart's selection state so its content dims unselected series.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

When set, the tooltip shows by default at this data point index.

cursorbooleantrue

Whether the vertical cursor line follows the pointer on hover.

Legend

The series legend. When isClickable is set, each entry toggles selection of its series.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

The visual style of the legend indicators.

alignleft|center|right"right"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"top"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each legend entry toggle selection of its series.

Brush

An optional zoom brush below the chart. Include <EvilComposedChart.Brush /> to render it; dragging the range filters the main chart.

PropTypeDefaultDescription
heightnumber–

Height of the brush preview strip in pixels.

formatLabel(value: unknown, index: number) => string–

Formats the range-handle labels below the brush.

onChange(range: { startIndex: number; endIndex: number }) => void–

Fires when the brush selection range changes.

Did you like the content?