棒グラフライブラリ比較

'use client';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { month: '1月', sales: 4200, target: 4000 },
  { month: '2月', sales: 3800, target: 4000 },
  { month: '3月', sales: 5100, target: 5000 },
  { month: '4月', sales: 4600, target: 4500 },
  { month: '5月', sales: 5400, target: 5000 },
  { month: '6月', sales: 4900, target: 5000 },
];

export function RechartsBarChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="sales" fill="#3b82f6" name="売上" radius={[4, 4, 0, 0]} />
        <Bar dataKey="target" fill="#10b981" name="目標" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

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

const data = [
  { month: '1月', sales: 4200, target: 4000 },
  { month: '2月', sales: 3800, target: 4000 },
  { month: '3月', sales: 5100, target: 5000 },
  { month: '4月', sales: 4600, target: 4500 },
  { month: '5月', sales: 5400, target: 5000 },
  { month: '6月', sales: 4900, target: 5000 },
];

export function NivoBarChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveBar
        data={data}
        keys={['sales', 'target']}
        indexBy="month"
        margin={{ top: 20, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        groupMode="grouped"
        colors={['#3b82f6', '#10b981']}
        borderRadius={4}
        legends={[{
          dataFrom: 'keys',
          anchor: 'bottom-right',
          direction: 'column',
          itemWidth: 100,
          itemHeight: 20,
        }]}
      />
    </div>
  );
}

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

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

const labels = ['1月', '2月', '3月', '4月', '5月', '6月'];

const data = {
  labels,
  datasets: [
    {
      label: '売上',
      data: [4200, 3800, 5100, 4600, 5400, 4900],
      backgroundColor: 'rgba(59, 130, 246, 0.8)',
    },
    {
      label: '目標',
      data: [4000, 4000, 5000, 4500, 5000, 5000],
      backgroundColor: 'rgba(16, 185, 129, 0.8)',
    },
  ],
};

export function ChartJSBarChart() {
  return <Bar data={data} options={{ responsive: true, maintainAspectRatio: false }} height={300} />;
}

'use client';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

export function PlotlyBarChart() {
  return (
    <Plot
      data={[
        {
          type: 'bar',
          x: ['1月', '2月', '3月', '4月', '5月', '6月'],
          y: [4200, 3800, 5100, 4600, 5400, 4900],
          name: '売上',
          marker: { color: '#6366f1' },
        },
        {
          type: 'bar',
          x: ['1月', '2月', '3月', '4月', '5月', '6月'],
          y: [4000, 4000, 5000, 4500, 5000, 5000],
          name: '目標',
          marker: { color: '#a5b4fc' },
        },
      ]}
      layout={{
        title: { text: '月別売上比較' },
        barmode: 'group',
        height: 300,
        margin: { t: 40, b: 40, l: 60, r: 20 },
      }}
      style={{ width: '100%' }}
      config={{ responsive: true }}
    />
  );
}

'use client';
import dynamic from 'next/dynamic';
const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });

export function EChartsBarChart() {
  const option = {
    tooltip: { trigger: 'axis' },
    legend: { data: ['売上', '目標'], top: 'top' },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
    yAxis: { type: 'value' },
    series: [
      { name: '売上', type: 'bar', data: [4200, 3800, 5100, 4600, 5400, 4900] },
      { name: '目標', type: 'bar', data: [4000, 4000, 5000, 4500, 5000, 5000] },
    ],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}

'use client';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

export function ApexBarChart() {
  const options = {
    chart: { type: 'bar' as const, toolbar: { show: false } },
    xaxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月'] },
    plotOptions: { bar: { borderRadius: 4, columnWidth: '60%' } },
    dataLabels: { enabled: false },
    colors: ['#3b82f6', '#10b981'],
    tooltip: { y: { formatter: (val: number) => val.toLocaleString() } },
  };
  const series = [
    { name: '売上', data: [4200, 3800, 5100, 4600, 5400, 4900] },
    { name: '目標', data: [4000, 4000, 5000, 4500, 5000, 5000] },
  ];
  return <Chart type="bar" options={options} series={series} height={300} width="100%" />;
}

'use client';
import dynamic from 'next/dynamic';
import * as echarts from 'echarts/core';
import { AxisBreak } from 'echarts/features';
echarts.use([AxisBreak]);
const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false });

const data = [
  { name: 'A社', value: 120 },
  { name: 'B社', value: 980 },
  { name: 'C社', value: 95 },
  { name: 'D社', value: 140 },
  { name: 'E社', value: 110 },
];

export function EChartsAxisBreakChart() {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    },
    xAxis: {
      type: 'category',
      data: data.map(d => d.name),
    },
    yAxis: {
      type: 'value',
      breaks: [
        { start: 250, end: 800 },
      ],
    },
    series: [
      {
        type: 'bar',
        data: data.map(d => d.value),
        itemStyle: { color: '#6366f1' },
      },
    ],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}