Usage

Use the existing Evil Charts compound API with a stable, explicitly sized container.

revenue-chart.tsx

25 lines

"use client";

import { EChartsBarChart, type ChartConfig } from "@/components/charts/echarts-bar-chart";

const config = {
  revenue: { label: "Revenue", colors: { light: ["#047857"], dark: ["#10b981"] } },
} satisfies ChartConfig;

export function RevenueChart() {
  return (
    <EChartsBarChart
      data={[{ month: "January", revenue: 342 }, { month: "February", revenue: 876 }]}
      config={config}
      ariaLabel="Monthly revenue in dollars"
      className="h-80 w-full"
      xDataKey="month"
    >
      <EChartsBarChart.Grid />
      <EChartsBarChart.XAxis dataKey="month" />
      <EChartsBarChart.Bar dataKey="revenue" isClickable />
      <EChartsBarChart.Tooltip />
      <EChartsBarChart.Legend isClickable />
    </EChartsBarChart>
  );
}

Size and lifecycle

Set a positive height on the chart. Initialization waits until the container is visible and has a width and height. Resize and theme updates preserve selection and brush ranges. Canvas is the default; use renderer="svg" for SVG. Changing the renderer recreates the rendering surface.

Data

Cartesian charts retain negative values and show missing or non-finite samples as gaps. Empty data shows a status message. Pie and radial charts require non-negative magnitudes; zero totals show an empty state. Sankey nodes require unique names, valid link endpoints, finite non-negative values, and an acyclic graph. Corrected data can recover in place.

Accessibility and motion

Give the chart a meaningful ariaLabel. Clickable legends support Enter and Space. Brush start and end controls support keyboard range adjustment and appear on focus. Reduced motion disables entrance and looping decoration. Include a data table when exact values are important to your audience.

Theme and tooltips

ChartConfig supports light and dark color arrays, labels, and icons. Theme colors resolve from the chart’s own document, including iframe previews. Built-in tooltip labels and values are escaped. Custom chartOptions formatters are trusted application code: escape any untrusted HTML they return.

"use client"; import { EChartsBarChart, type ChartConfig } from "@/components/charts/echarts-bar-chart"; const config = { revenue: { label: "Revenue", colors: { light: ["#047857"], dark: ["#10b981"] } }, } satisfies ChartConfig; export function RevenueChart() { return ( <EChartsBarChart data={[{ month: "January", revenue: 342 }, { month: "February", revenue: 876 }]} config={config} ariaLabel="Monthly revenue in dollars" className="h-80 w-full" xDataKey="month" > <EChartsBarChart.Grid /> <EChartsBarChart.XAxis dataKey="month" /> <EChartsBarChart.Bar dataKey="revenue" isClickable /> <EChartsBarChart.Tooltip /> <EChartsBarChart.Legend isClickable /> </EChartsBarChart> ); }

Data