ダッシュボードが映えない悩みに。EvilChartsで作る美麗チャートUI

はじめに

「機能は完成したのに、ダッシュボードのグラフがどうにも地味……」そんな経験はありませんか？Rechartsでチャートを描くと動作はするものの、デフォルトのままでは味気なく、かといってデザインを作り込む時間もない。多くのReact開発者が一度はぶつかる壁です。

その悩みに真正面から応えるのがEvilChartsです。shadcn/uiとRechartsの上に構築された、美しくデザイン済みのチャートコンポーネント集で、CLIコマンド一発でプロジェクトに追加できます。この記事では、EvilChartsの特徴からインストール、実践的な使い方までを解説します。

EvilChartsとは

EvilChartsは、Axiom.coのデザインエンジニアであるGurbinder氏が開発した、ReactおよびNext.jsアプリケーション向けのオープンソースチャートコンポーネント集です。棒グラフ・折れ線グラフ・エリアグラフ・円グラフ・レーダーチャートといった主要なチャートタイプを、SVGとMotionを駆使した「ハンドクラフト」なデザインで提供します。GitHubで2.6kを超えるスターを集めており、MITライセンスで公開されています。

重要なのは、EvilChartsが「npmでインストールするライブラリ」ではなく、shadcn/uiと同じ思想のコピー&ペースト型コンポーネント集だという点です。CLIで追加したチャートのソースコードはそのままプロジェクト内に配置されるため、スタイルもロジックも自由に書き換えられます。

主な特徴

デザイン済みで即戦力 - グラデーション、ドット背景、グロー効果など、そのまま製品に載せられるビジュアルが最初から用意されています
アニメーション内蔵 - 滑らかなトランジションとインタラクティブな動きが標準で組み込まれており、追加実装なしで「動くチャート」になります
コードを完全に所有できる - コンポーネントのコードは自分のリポジトリに追加されるので、ブラックボックスがなく、細部まで自由にカスタマイズできます
レスポンシブ対応 - 画面サイズやデバイスの向きに合わせて自動で適応します

インストール

EvilChartsはRechartsとshadcn/uiを前提としています。順番にセットアップしていきましょう。

1. Rechartsのインストール

チャートの描画エンジンとなるRechartsを追加します。

# npm
npm install recharts

# pnpm
pnpm add recharts

# bun
bun add recharts

2. shadcn/uiの初期化

まだshadcn/uiを導入していない場合は、初期化を実行します（導入済みならスキップして構いません）。

npx shadcn@latest init

3. チャートコンポーネントの追加

あとは使いたいチャートをCLIで追加するだけです。

npx shadcn@latest add @evilcharts/{chart-name}

{chart-name} には bar-chart や line-chart など、公式サイトのギャラリーに掲載されているチャート名を指定します。コンポーネント本体と必要な依存関係がまとめてプロジェクトに取り込まれます。

基本的な使い方

追加したチャートは、通常のReactコンポーネントとしてインポートするだけで使えます。たとえば棒グラフの場合は次のとおりです。

"use client";

import { DefaultBarChart } from "@/components/charts/default-bar-chart";

export function MyDashboard() {
  return <DefaultBarChart />;
}

これだけでアニメーション付きの美しい棒グラフが表示されます。「え、これだけ？」と思うかもしれませんが、デザインの作り込みがすべてコンポーネント側に含まれているのがEvilChartsの強みです。

自分のデータを表示したい場合は、コンポーネントのソースコードを直接編集します。コードは @/components/charts/ 配下にあるので、データ配列を差し替えるだけです。

// components/charts/default-bar-chart.tsx 内のデータを編集
const chartData = [
  { month: "1月", sales: 186 },
  { month: "2月", sales: 305 },
  { month: "3月", sales: 237 },
  { month: "4月", sales: 273 },
  { month: "5月", sales: 209 },
  { month: "6月", sales: 314 },
];

npmパッケージと違い「propsで渡せる範囲」に縛られないので、軸のフォーマットや色、ツールチップの中身まで思いのままに変更できます。

実践的なユースケース

SaaSダッシュボードの売上推移グラフ

コンポーネントをpropsでデータを受け取る形に書き換えれば、APIから取得した実データを流し込めます。コードを所有しているからこそできる改造です。

"use client";

import { useEffect, useState } from "react";
import { DefaultBarChart } from "@/components/charts/default-bar-chart";

type SalesData = { month: string; sales: number };

export function SalesDashboard() {
  const [data, setData] = useState<SalesData[]>([]);

  useEffect(() => {
    fetch("/api/sales", {
      method: "GET",
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => res.json())
      .then((json: SalesData[]) => setData(json));
  }, []);

  if (data.length === 0) {
    return <p>読み込み中...</p>;
  }

  return <DefaultBarChart data={data} />;
}

コンポーネント側では、ハードコードされていた chartData をpropsに置き換えるだけです。

// default-bar-chart.tsx を props 対応に改造
type Props = {
  data: { month: string; sales: number }[];
};

export function DefaultBarChart({ data }: Props) {
  // 既存の chartData を data に差し替える
  // ...チャート描画部分はそのまま
}

ランディングページの「魅せる」統計セクション

グロー効果やグラデーション付きのチャートは、プロダクトのランディングページとの相性が抜群です。ダークテーマのヒーローセクションにアニメーション付きのエリアチャートを置けば、それだけで「ちゃんとしたプロダクト」の印象を与えられます。shadcn/uiのテーマ変数と連動しているため、サイト全体の配色とも自然に馴染みます。

既存のRechartsコードからの段階的な移行

すでにRechartsで書かれたダッシュボードがある場合も、全面書き換えは不要です。EvilChartsの実体はRechartsのラッパーなので、1枚ずつチャートを置き換えていく段階的な移行が可能です。まずは一番目立つグラフだけEvilChartsに差し替えて、効果を見ながら広げていくのが現実的な進め方です。