DOCSEARCHbyAlgolia
Submit Docs

EvilCharts

repository·main·Indexed 25 days ago

https://github.com/legions-developer/evilcharts

A modern, customizable chart library for React and Next.js applications providing interactive and animated data visualizations. It supports Bar, Line, Area, Pie, and Radar charts, featuring a composable compound component pattern for ECharts-based implementations. The library includes specialized blocks for latency percentiles, portfolio comparison, growth benchmarking, and audience growth, and provides a type-safe ChartConfig for managing labels and theme-aware colors.

Tokens
37.4K
Snippets
72
Records
213
Agent score
82%

What's inside evilcharts

  1. Overview of EvilCharts

    main

    EvilCharts is a modern, customizable chart library designed for React and Next.js applications. It provides visually stunning, interactive, and animated data visualizations that are fully responsive.

    Supported chart types include:

    • Bar
    • Line
    • Area
    • Pie
    • Radar

    Developers can customize styles, patterns, and effects to match their application's design.

  3. Use Dots in Line and Area charts

    main

    To render point markers in a chart, compose <Dot /> and <ActiveDot /> components inside a <Line /> or <Area /> component.

    • <Dot />: Renders the resting marker at every data point.
    • <ActiveDot />: Renders the marker shown when a specific data point is hovered.

    Both components automatically inherit the series color and style from the chart context.

    import { EChartsLineChart } from "@/components/evilcharts/charts/echarts-line-chart";

<EChartsLineChart data={data} config={chartConfig} xDataKey="month">
  <EChartsLineChart.Line dataKey="desktop">
    <EChartsLineChart.Dot variant="border" />
    <EChartsLineChart.ActiveDot variant="default" />
  </EChartsLineChart.Line>
</EChartsLineChart>;

  4. Create a custom background pattern variant

    main

    To add a custom background style, you must modify the internal registry files. Follow these three steps:

    1. Update the Type: Add your new variant name to the BackgroundVariant union type in src/registry/ui/background.tsx.
    2. Create the Pattern Component: Define a React component that returns an SVG <pattern> element containing your desired shapes.
    3. Register the Pattern: Add your new component to the PATTERN_MAP object in src/registry/ui/background.tsx.

    Once registered, use the new variant name in the backgroundVariant prop of your chart component.

    // 1. Update BackgroundVariant type
export type BackgroundVariant = 
  | "dots" 
  | "grid" 
  | "custom-pattern";

// 2. Create the pattern component
const CustomPattern = ({ id }: { id: string }) => (
    <pattern
      id={id}
      x="0"
      y="0"
      width="24"
      height="24"
      patternUnits="userSpaceOnUse"
    >
      <path
        className="text-border dark:text-border"
        d="M12 2l2.2 4.6L19 9l-4.8 2.4L12 16l-2.2-4.6L5 9l4.8-2.4L12 2z"
        fill="currentColor"
        fillOpacity="0.35"
      />
    </pattern>
);

// 3. Register in PATTERN_MAP
const PATTERN_MAP: Record<BackgroundVariant, React.FC<{ id: string }>> = {
    dots: DotsPattern,
    grid: GridPattern,
    "custom-pattern": CustomPattern,
};

// Usage
<EvilLineChart
  xDataKey="month"
  data={data}
  chartConfig={chartConfig}
  backgroundVariant="custom-pattern"
/>

  6. Choose between Recharts and ECharts engines

    main

    EvilCharts provides two rendering engines for the same chart components. You can mix and match them within a single project or dashboard based on your data needs.

    • Recharts Engine: Uses SVG rendering. Every element (gradients, dots, glows) is a real DOM node. It is highly themeable via CSS variables and is best for design-heavy surfaces like product dashboards and marketing pages where data volume is moderate.
    • ECharts Engine: Uses Canvas rendering. It is built for scale and high-performance scenarios. It is best for dense data (thousands of points), long time series, or high-frequency live data updates where DOM node overhead would cause performance issues.

    Switching engines is a simple component rename; the data and config props remain identical.

  7. Install the Sankey Chart component

    main

    You can install the Sankey Chart via the CLI or manually.

    CLI Installation: Run the following command:

    npm install @evilcharts/recharts-sankey-chart

    Manual Installation:

    1. Install dependencies: recharts and motion.
    2. Create an evilcharts/charts folder in your components directory and copy the recharts-sankey-chart.tsx source code there.
    3. Create an evilcharts/ui folder and copy the recharts-chart.tsx source code there.

  8. Use the EChartsLineChart.Legend component

    main

    To add a legend to your chart, compose <EChartsLineChart.Legend /> as a child of the chart root (e.g., <EChartsLineChart />). You can use the variant prop to change the indicator style and the isClickable prop to allow users to toggle the visibility of data series by clicking legend entries.

    <EChartsLineChart data={data} config={chartConfig} xDataKey="month">
  <EChartsLineChart.Legend variant="circle" isClickable />
  <EChartsLineChart.Line dataKey="desktop" />
  <EChartsLineChart.Line dataKey="mobile" />
</EChartsLineChart>

  11. Implement interactive node selection

    main

    To enable node selection, set the isClickable prop on <EvilSankeyChart.Node />. You can then handle selection events using the onSelectionChange callback on the <EvilSankeyChart /> root. The callback receives an object with dataKey (the node name) and value, or null if the node is deselected.

    <EvilSankeyChart
  data={data}
  config={chartConfig}
  onSelectionChange={(selection) => {
    if (selection) {
      console.log("Selected:", selection.dataKey, "Value:", selection.value);
    } else {
      console.log("Deselected");
    }
  }}
>
  <EvilSankeyChart.Node isClickable />
  <EvilSankeyChart.Link variant="source" />
  <EvilSankeyChart.Tooltip />
</EvilSankeyChart>