Next.jsで使えるチャートライブラリを調べてみた

'use client';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { name: '1月', uv: 4000, pv: 2400 },
  { name: '2月', uv: 3000, pv: 1398 },
  { name: '3月', uv: 2000, pv: 9800 },
];

export default function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="pv" stroke="#8884d8" />
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  );
}

'use client';

import * as d3 from 'd3';

interface LinePlotProps {
  data: number[];
  width?: number;
  height?: number;
  marginTop?: number;
  marginRight?: number;
  marginBottom?: number;
  marginLeft?: number;
}

export default function LinePlot({
  data,
  width = 640,
  height = 400,
  marginTop = 20,
  marginRight = 20,
  marginBottom = 20,
  marginLeft = 20
}: LinePlotProps) {
  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);
  const y = d3.scaleLinear(d3.extent(data) as [number, number], [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);

  return (
    <svg width={width} height={height}>
      <path fill="none" stroke="currentColor" strokeWidth="1.5" d={line(data) || ''} />
      <g fill="white" stroke="currentColor" strokeWidth="1.5">
        {data.map((d, i) => (<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />))}
      </g>
    </svg>
  );
}

'use client';

import * as d3 from 'd3';
import { useRef, useEffect } from 'react';

interface LinePlotProps {
  data: number[];
  width?: number;
  height?: number;
  marginTop?: number;
  marginRight?: number;
  marginBottom?: number;
  marginLeft?: number;
}

export default function LinePlot({
  data,
  width = 640,
  height = 400,
  marginTop = 20,
  marginRight = 20,
  marginBottom = 30,
  marginLeft = 40
}: LinePlotProps) {
  const gx = useRef<SVGGElement>(null);
  const gy = useRef<SVGGElement>(null);
  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);
  const y = d3.scaleLinear(d3.extent(data) as [number, number], [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);

  useEffect(() => {
    if (gx.current) d3.select(gx.current).call(d3.axisBottom(x));
  }, [gx, x]);
  useEffect(() => {
    if (gy.current) d3.select(gy.current).call(d3.axisLeft(y));
  }, [gy, y]);

  return (
    <svg width={width} height={height}>
      <g ref={gx} transform={`translate(0,${height - marginBottom})`} />
      <g ref={gy} transform={`translate(${marginLeft},0)`} />
      <path fill="none" stroke="currentColor" strokeWidth="1.5" d={line(data) || ''} />
      <g fill="white" stroke="currentColor" strokeWidth="1.5">
        {data.map((d, i) => (<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />))}
      </g>
    </svg>
  );
}

'use client';

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const data = {
  labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
  datasets: [
    {
      label: '売上',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

export default function SalesBarChart() {
  return <Bar data={data} />;
}

'use client';

import { ResponsiveBar } from '@nivo/bar';

const data = [
  { country: 'JP', sales: 120, profit: 80 },
  { country: 'US', sales: 90, profit: 60 },
  { country: 'EU', sales: 70, profit: 45 },
];

export default function NivoBarChart() {
  return (
    <div style={{ height: 400 }}>
      <ResponsiveBar
        data={data}
        keys={['sales', 'profit']}
        indexBy="country"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        colors={{ scheme: 'nivo' }}
        borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
        axisBottom={{ tickSize: 5, tickPadding: 5 }}
        axisLeft={{ tickSize: 5, tickPadding: 5 }}
        labelSkipWidth={12}
        labelSkipHeight={12}
        legends={[
          {
            dataFrom: 'keys',
            anchor: 'bottom-right',
            direction: 'column',
            translateX: 120,
            itemWidth: 100,
            itemHeight: 20,
          },
        ]}
      />
    </div>
  );
}

'use client';

import ReactECharts from 'echarts-for-react';

export default function EChartsDemo() {
  const option = {
    title: { text: '売上推移' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '売上',
        type: 'line',
        data: [150, 230, 224, 218, 135, 147],
        smooth: true,
      },
    ],
  };

  return <ReactECharts option={option} style={{ height: 400 }} />;
}

//ドリルダウン
'use client';

import ReactECharts from 'echarts-for-react';
import { useRef, useCallback } from 'react';
import type { ECharts } from 'echarts';

const drilldownData = [
  {
    dataGroupId: 'animals',
    data: [
      ['Cats', 4],
      ['Dogs', 2],
      ['Cows', 1],
      ['Sheep', 2],
      ['Pigs', 1],
    ]
  },
  {
    dataGroupId: 'fruits',
    data: [
      ['Apples', 4],
      ['Oranges', 2],
    ]
  },
  {
    dataGroupId: 'sports',
    data: [
      ['Soccer', 5],
      ['Baseball', 3],
      ['Tennis', 2],
    ]
  }
];

const getMainOption = () => ({
  xAxis: {
    data: ['Animals', 'Fruits', 'Sports']
  },
  yAxis: {},
  dataGroupId: '',
  animationDurationUpdate: 500,
  series: {
    type: 'bar',
    id: 'sales',
    data: [
      { value: 5, groupId: 'animals' },
      { value: 2, groupId: 'fruits' },
      { value: 4, groupId: 'sports' }
    ],
    universalTransition: {
      enabled: true,
      divideShape: 'clone'
    }
  }
});

export default function DrilldownChart() {
  const chartRef = useRef<ECharts | null>(null);

  const onChartReady = useCallback((chart: ECharts) => {
    chartRef.current = chart;
  }, []);

  const onEvents = {
    click: (event: { data?: { groupId?: string } }) => {
      if (!chartRef.current || !event.data) return;

      const subData = drilldownData.find(
        data => data.dataGroupId === event.data?.groupId
      );

      if (!subData) return;

      chartRef.current.setOption({
        xAxis: {
          data: subData.data.map(item => item[0])
        },
        series: {
          type: 'bar',
          id: 'sales',
          dataGroupId: subData.dataGroupId,
          data: subData.data.map(item => item[1]),
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        },
        graphic: [
          {
            type: 'text',
            left: 50,
            top: 20,
            style: {
              text: 'Back',
              fontSize: 18,
              fill: '#3498db',
              cursor: 'pointer'
            },
            onclick: () => {
              chartRef.current?.setOption(getMainOption(), true);
            }
          }
        ]
      });
    }
  };

  return (
    <ReactECharts
      option={getMainOption()}
      style={{ height: 400 }}
      onChartReady={onChartReady}
      onEvents={onEvents}
    />
  );
}