||

Composed Chart

Documentation Index

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

Simple static & beautifully designed composed charts combining bars and lines

apidocgithub
Basic Chart

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

Usage

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

import {
  EvilComposedChart,
  Bar,
  Line,
  XAxis,
  YAxis,
  Grid,
  Tooltip,
  Legend,
  Dot,
  ActiveDot,
} from "@/components/evilcharts/charts/composed-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}>
  <Grid />
  <XAxis dataKey="month" />
  <YAxis />
  <Legend isClickable />
  <Tooltip />
  <Bar dataKey="revenue" variant="gradient" isClickable />
  <Line dataKey="profit" strokeVariant="dashed" isClickable>
    <Dot variant="default" />
    <ActiveDot variant="colored-border" />
  </Line>
</EvilComposedChart>

Interactive Selection

Add isClickable to any <Bar> or <Line> (and to <Legend>) to make those series selectable. Use the onSelectionChange callback on <EvilComposedChart> to handle selection events:

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

Loading State

isLoading={true}

Examples

Below are some examples of the composed chart with different variants. You can customize each <Bar> with a variant, and each <Line> with a strokeVariant, curveType, and other properties.

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 chart is composed of several parts. The props below are grouped by the component they belong to.

EvilComposedChart

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

PropTypeDefaultDescription
data*TData[]–

Data used to display the chart. An array of objects where each object represents a data point (TData extends Record<string, unknown>).

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

Configuration object that defines every bar and line series. Each key should match a data key in your data array, 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–

Additional CSS classes to apply to the chart container.

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

The default curve interpolation inherited by every <Line />. Each <Line /> may override it locally.

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

Default intro inherited by every <Bar /> and <Line /> — lines wipe in along this direction, bars grow up from their baseline staggered in this order. "none" disables it; devices with the OS reduce-motion preference fall back to "none" automatically.

barGapnumber–

The gap between bars sharing the same category.

barCategoryGapnumber–

The gap between different categories of bars.

defaultSelectedDataKeystring | nullnull

The data key that should be selected by default.

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

Callback fired 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 loading skeleton animation with a shimmer effect when data is being fetched.

loadingBarsnumber12

Number of bars to display in the loading skeleton.

showBrushbooleanfalse

When enabled, displays a brush control below the chart for selecting and zooming into a range of data.

xDataKeykeyof TData & string–

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

brushHeightnumber–

The height of the brush preview area in pixels.

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

Custom formatter for the brush axis labels.

onBrushChange(range: EvilBrushRange) => void–

Callback invoked when the user changes the brush selection range.

chartPropsComponentProps<typeof ComposedChart>–

Additional props forwarded to the underlying Recharts ComposedChart component. Read the Recharts ComposedChart documentation for available props.

Bar

A single bar series. Each <Bar /> is self-contained and 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 visual style of the bar fill. Applies to this bar only.

radiusnumber4

The corner radius of the bar 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

Lets this bar be selected by clicking it. When any series is selected, unselected series become semi-transparent.

enableHoverHighlightbooleanfalse

When enabled, hovering over a column dims this bar everywhere else, making it easier to focus on specific data points.

barPropsComponentProps<typeof Bar>–

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

Line

A single line series. Each <Line /> is self-contained and 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

Lets this line be selected by clicking it. When any series is selected, unselected series become semi-transparent.

childrenReactNode–

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

linePropsComponentProps<typeof Line>–

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

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, so dataKey, tickFormatter, tickMargin, etc. pass straight through. They are hidden 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. Read the Recharts XAxis and Recharts YAxis documentation 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. Read 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 is visible by default at the specified 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.

Did you like the content?