data-chart

インテグレーション

data-chart はあらゆる HTML ベースのプロジェクトで動作します。data 属性を使って <table> 要素を SVG チャートに変換するため、フレームワーク固有の設定は不要です。

目次

静的 HTML

最もシンプルな導入方法です。script タグを追加して、テーブルで data-chart を使い始めましょう。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/data-chart@latest/dist/data-chart.js"></script>
</head>
<body>
  <table data-chart="bar">
    <thead>
      <tr><th>Quarter</th><th>Revenue</th></tr>
    </thead>
    <tbody>
      <tr><td>Q1</td><td>420</td></tr>
      <tr><td>Q2</td><td>580</td></tr>
      <tr><td>Q3</td><td>510</td></tr>
      <tr><td>Q4</td><td>690</td></tr>
    </tbody>
  </table>
</body>
</html>

React (Vite)

npm でインストール:

npm install data-chart

エントリファイルの先頭で一度インポートします。data-chart は自動初期化され、MutationObserver でコンポーネントのマウントを検出します。

// src/main.tsx
import 'data-chart';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

任意のコンポーネントの <table> で data-chart 属性を使用:

// src/App.tsx
function App() {
  return (
    <table data-chart="line" data-chart-grid="y">
      <thead>
        <tr><th>Month</th><th>Users</th></tr>
      </thead>
      <tbody>
        <tr><td>Jan</td><td>1200</td></tr>
        <tr><td>Feb</td><td>1800</td></tr>
        <tr><td>Mar</td><td>2400</td></tr>
      </tbody>
    </table>
  );
}

useEffect、ref、ラッパーコンポーネントは不要です。

Vue (Vite)

npm でインストール:

npm install data-chart

エントリファイルの先頭で一度インポートします。data-chart は自動初期化され、MutationObserver でコンポーネントのマウントを検出します。

// src/main.ts
import 'data-chart';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

任意のコンポーネントの <table> で data-chart 属性を使用:

<!-- src/components/Chart.vue -->
<template>
  <table data-chart="bar" data-chart-stacked>
    <thead>
      <tr><th>Q</th><th>Desktop</th><th>Mobile</th></tr>
    </thead>
    <tbody>
      <tr><td>Q1</td><td>300</td><td>200</td></tr>
      <tr><td>Q2</td><td>280</td><td>250</td></tr>
    </tbody>
  </table>
</template>

onMounted、ref、ディレクティブは不要です。

Next.js

npm でインストール:

npm install data-chart

data-chart はモジュールレベルで document にアクセスするため、SSR エラーを避けるために useEffect 内で動的インポートを使用します:

// app/DataChart.tsx
'use client';
import { useEffect } from 'react';

export default function DataChart() {
  useEffect(() => {
    import('data-chart');
  }, []);
  return null;
}
// app/layout.tsx
import DataChart from './DataChart';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <DataChart />
        {children}
      </body>
    </html>
  );
}

Server Component でも Client Component でも属性を使用できます:

// app/page.tsx
export default function Home() {
  return (
    <main>
      <table data-chart="pie">
        <thead>
          <tr><th>Browser</th><th>Share</th></tr>
        </thead>
        <tbody>
          <tr><td>Chrome</td><td>65</td></tr>
          <tr><td>Safari</td><td>19</td></tr>
          <tr><td>Firefox</td><td>10</td></tr>
          <tr><td>Other</td><td>6</td></tr>
        </tbody>
      </table>
    </main>
  );
}

Nuxt

ルートコンポーネントで useHead を使い、CDN 経由で data-chart を読み込みます:

<!-- app/app.vue -->
<script setup>
useHead({
  script: [
    {
      src: 'https://unpkg.com/data-chart@latest/dist/data-chart.js',
      tagPosition: 'head',
    },
  ],
});
</script>

<template>
  <div>
    <table data-chart="donut">
      <thead>
        <tr><th>Category</th><th>Budget</th></tr>
      </thead>
      <tbody>
        <tr><td>Engineering</td><td>45</td></tr>
        <tr><td>Marketing</td><td>25</td></tr>
        <tr><td>Sales</td><td>20</td></tr>
        <tr><td>Support</td><td>10</td></tr>
      </tbody>
    </table>
  </div>
</template>

追加のプラグインや nuxt.config.ts の変更は不要です。

Astro

ベースレイアウトに追加:

---
// src/layouts/Layout.astro
---
<html>
  <head>
    <script src="https://unpkg.com/data-chart@latest/dist/data-chart.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

任意の .astro または .mdx ページで使用:

<table data-chart="area" data-chart-grid="both">
  <thead>
    <tr><th>Week</th><th>Visitors</th></tr>
  </thead>
  <tbody>
    <tr><td>W1</td><td>3200</td></tr>
    <tr><td>W2</td><td>4100</td></tr>
    <tr><td>W3</td><td>5200</td></tr>
  </tbody>
</table>

基本原則

data-chart は設計上フレームワーク非依存です。HTML <table> 要素が書ける場所ならどこでも動作します。MutationObserver が動的に追加されたテーブルを自動検出するため、SPA ナビゲーションや遅延読み込みコンテンツもそのまま動作します。