Composed Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Beautifully designed composed charts combining bars and lines, powered by Apache ECharts
Installation
Usage
The ECharts composed chart is composible, sharing the Recharts twin's API shape. <EChartsComposedChart> is the container, and every part hangs off it as a compound member — <EChartsComposedChart.Grid>, <EChartsComposedChart.XAxis>, <EChartsComposedChart.YAxis>, <EChartsComposedChart.Legend>, <EChartsComposedChart.Tooltip>, and one or more <EChartsComposedChart.Bar> and <EChartsComposedChart.Line> — so a single import gives you the whole chart. Each <Bar> carries its own variant, glow, and isClickable, and each <Line> its own strokeVariant, curveType, glow, and isClickable, so one chart can freely mix bar and line styles.
import { EChartsComposedChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-composed-chart";const chartConfig = {
revenue: {
label: "Revenue",
colors: { light: ["#3b82f6"], dark: ["#6A5ACD"] },
},
profit: {
label: "Profit",
colors: { light: ["#10b981"], dark: ["#34d399"] },
},
} satisfies ChartConfig;
<EChartsComposedChart xDataKey="month" data={data} config={chartConfig}>
<EChartsComposedChart.Grid />
<EChartsComposedChart.XAxis dataKey="month" />
<EChartsComposedChart.YAxis />
<EChartsComposedChart.Legend isClickable />
<EChartsComposedChart.Tooltip />
<EChartsComposedChart.Bar dataKey="revenue" variant="gradient" isClickable />
<EChartsComposedChart.Line dataKey="profit" strokeVariant="dashed" isClickable>
<EChartsComposedChart.Dot variant="default" />
<EChartsComposedChart.ActiveDot variant="colored-border" />
</EChartsComposedChart.Line>
</EChartsComposedChart>The difference from the Recharts twin is under the hood: these compound children are declarative configuration slots rather than visual React DOM nodes. The root reads their props and compiles an ECharts option, which ECharts paints with Canvas by default or SVG when renderer="svg".
The config is the same contract as every EvilCharts chart — each key maps a data key to a label and a per-theme colors array. See Chart Config for the full shape. Colors resolve from your CSS variables at runtime, so dark mode just works.
The ECharts implementation brings a few small departures from the Recharts twin: multi-color bars run a vertical gradient through their color slots, the glow becomes a soft colored blur rather than the Recharts SVG filter, and the zoom brush is a themed mini chart driven by native dataZoom. The textured hatched bar fill uses an offscreen canvas tile; with renderer="svg", ECharts may embed that tile as a raster image inside the SVG.
SVG Renderer
Pass renderer="svg" to the chart root to opt into ECharts' SVG renderer. Omit it to use the default Canvas renderer.
Interactive Selection
Add isClickable to any <Bar>, <Line>, or <Legend> to make its series selectable, and handle events with the onSelectionChange callback on <EChartsComposedChart>:
<EChartsComposedChart
data={data}
config={chartConfig}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
>
<EChartsComposedChart.XAxis dataKey="month" />
<EChartsComposedChart.Legend isClickable />
<EChartsComposedChart.Tooltip />
<EChartsComposedChart.Bar dataKey="revenue" isClickable />
<EChartsComposedChart.Line dataKey="profit" isClickable />
</EChartsComposedChart>Loading State
Pass isLoading to show an animated skeleton of shimmering bars and a line, both revealed by one diagonal shimmer sweep. Use loadingBars to set how many bars it draws.
Examples
Examples of the composed chart with different variants. Customize each <Bar> with a variant, and each <Line> with a strokeVariant, curveType, and more.
Gradient Colors
Bar Variants
Line Stroke Variants
Curve Types
Line Dots
Inside a <Line>, compose a <Dot> for the resting marker and an <ActiveDot> for the one shown on hover. Available variants: default, border, colored-border.
Hover Highlight
Set enableHoverHighlight on a <Bar> to dim its other columns when you hover one, making a single data point easier to focus on. It uses ECharts' native emphasis, so nothing re-renders mid-hover.
Glowing Effects
Add the glow prop to a <Bar> or <Line> for a subtle glow. ECharts renders it as a soft colored blur that follows the series' own color along its length, staying faithful even on multi-stop gradients.
API Reference
The chart is composed of several parts; the props below are grouped by part. Regardless of renderer, each part is config the root compiles, but the API mirrors the Recharts twin one-to-one.
The root container. It owns the data, shared selection state, loading skeleton, and optional native dataZoom brush. Everything visual is composed as its children and compiled into the ECharts option.
A single bar series. Each <Bar /> carries its own fill variant, radius, glow, and clickability, so a chart can hold any number of bars.
A single line series. Each <Line /> carries its own stroke, curve, glow, and clickability, so a chart can hold any number of lines.
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.
The category and value axes. Include <XAxis /> for the x-axis labels and <YAxis /> for the y-axis; omit either to hide it. Both hide automatically while loading.
The background grid lines. Include it to render the dashed horizontal split lines; omit it and they don't draw. Takes no props.
The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads the selection state and dims unselected series.
The series legend, rendered as HTML above the chart surface. Include it to show the legend; omit it and none shows. With isClickable, each entry toggles selection of its series.
An optional zoom brush below the chart — a themed mini chart driven by ECharts' native dataZoom. Include <EChartsComposedChart.Brush /> to render it; dragging the range filters the main chart.