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

はじめに

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

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

とはいえ、説明を読むより実際に触った方が早いはずです。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 など、公式サイトのギャラリーに掲載されているチャート名を指定します。コンポーネント本体と必要な依存関係がまとめてプロジェクトに取り込まれます。

EvilChartsのサンプルを動かす

前述のとおりEvilChartsはnpx shadcn addでソースコードをプロジェクトにコピーする配布形式のため、npmパッケージとして直接importして動かすことができません（npm view evilchartsはnot foundになります）。そこで、EvilChartsの各コンポーネントが実際に依拠しているRechartsのAPIを使って、EvilChartsが生成するのと同種の「グラデーション付きエリアチャート」を再現しました。ポイントは<defs>内の<linearGradient>と、Areaコンポーネントのfillにurl(#id)を渡す組み合わせです。EvilChartsのEvilAreaChart系コンポーネントも内部でこの実装パターンを使っています。

<AreaChart data={data}>
  <defs>
    <linearGradient id="evilGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.8} />
      <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
    </linearGradient>
  </defs>
  <Area
    type="monotone"
    dataKey="value"
    stroke="#8b5cf6"
    fill="url(#evilGradient)"
    isAnimationActive
    animationDuration={800}
  />
</AreaChart>

実際に動かせるサンプルが下です。「週次」「月次」ボタンでRechartsのdataプロパティを切り替えると、Area要素がアニメーション付きで再描画されます。

「週次」「月次」で表示が切り替わるだけでなく、切り替えるたびにエリアがふわっと描画されるのが分かるはずです（Areaにkey={range}を渡してデータ変更時に再アニメーションさせています）。stopColorを#8b5cf6（紫）から#06b6d4（シアン）に変えるとグラデーションの色味が変わり、animationDurationの数値を大きくするとアニメーションがゆっくりになります。EvilChartsのCLIで追加されるコンポーネントも、これと同じlinearGradient＋fill="url(#...)"の組み合わせでグラデーションを実現しています。

基本的な使い方

追加したチャートは、通常の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に差し替えて、効果を見ながら広げていくのが現実的な進め方です。

EvilCharts風グラデーション棒グラフでデータを切り替える

EvilChartsのギャラリーには、商品別・地域別のようにデータの切り口をボタンで切り替えられる棒グラフも並んでいます。この見た目は、RechartsのBarコンポーネントにradiusで角丸を付け、Cellで1本ずつ色を指定するだけで再現できます。EvilChartsが生成するコンポーネントも、内部ではBarとCellの組み合わせでカラフルな棒グラフを描画しています。

<Bar dataKey="value" radius={[8, 8, 0, 0]} isAnimationActive animationDuration={600}>
  {data.map((_, i) => (
    <Cell key={i} fill={colors[i % colors.length]} />
  ))}
</Bar>

下のサンプルでは「商品別」「地域別」ボタンでRechartsに渡すdata配列そのものを差し替えています。EvilCharts流の使い方（コンポーネントのソースコードを直接書き換えてデータを差し替える）を、propsではなくstateの切り替えとして体験できます。

ボタンを押すたびに棒の高さが数値の変化に合わせてアニメーションしながら伸び縮みします。colors配列の値を書き換えると棒ごとの配色が変わり、radiusの値を[8, 8, 0, 0]から[0, 0, 0, 0]にすると、EvilCharts特有の角丸デザインが標準的な角ばった棒グラフに戻ります。

EvilChartsのグロー演出をレーダーチャートで再現する

EvilChartsの特徴の1つが、SVGのグロー効果を使った「光るチャート」です。これはRechartsのコンポーネントに直接ある機能ではなく、SVGの<filter>（feGaussianBlur＋feMerge）をRadar要素のstyleにfilter: url(#glow)として適用することで実現しています。

<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="blur" />
  <feMerge>
    <feMergeNode in="blur" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

<Radar dataKey="value" stroke={color} fill={color} style={{ filter: 'url(#glow)' }} />

下のサンプルでは、色テーマのボタンと速度スライダーでRadarのstroke／fillとanimationDurationを切り替えられます。EvilChartsのカスタマイズ性の高さ（コードを所有しているからこそ自由に調整できる点）を、色とアニメーション速度の2軸で確認できます。

色テーマのボタンを切り替えるとstrokeとfillが変わり、光る輪郭の色が変わります。スライダーで速度を最小の200msにすると変化がほぼ一瞬になり、最大の2000msにするとEvilCharts特有のゆったりしたアニメーションが強調されます。stdDeviationの値を大きくするほど、グローのぼかしが強くなります。