データラベルの表示

import { LabelList, Bar, BarChart, Line, LineChart } from 'recharts';

// LabelList で各バーの上に値を表示
<BarChart data={data}>
  <Bar dataKey="value">
    <LabelList
      dataKey="value"
      position="top"       // 'top' | 'bottom' | 'center' | 'insideTop' | 'insideBottom'
      style={{ fontSize: 12, fill: '#374151' }}
      formatter={(value) => value.toLocaleString()}
    />
  </Bar>
</BarChart>

// 折れ線グラフのポイントラベル
<LineChart data={data}>
  <Line type="monotone" dataKey="value">
    <LabelList
      dataKey="value"
      position="top"
      formatter={(v) => `${v}件`}
      style={{ fontSize: 11, fill: '#6b7280' }}
    />
  </Line>
</LineChart>

// ECharts: series[].label でデータラベルを設定
const option = {
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110],

    label: {
      show: true,                              // 表示/非表示
      position: 'top',                         // 'top' | 'bottom' | 'inside' | 'insideTop' など

      // フォーマッタ
      formatter: '{c}',                        // {c}=value, {b}=name, {a}=seriesName
      // formatter: (params) => `${params.value.toLocaleString()}件`,

      // スタイル
      fontSize: 12,
      color: '#374151',
      fontWeight: 'bold',
    },

    // 重なり防止（自動的に隠す）
    labelLayout: {
      hideOverlap: true,
    },
  }],
};

// Plotly.js: text と textposition でラベルを表示
const data = [{
  type: 'bar',
  x: ['1月', '2月', '3月', '4月', '5月'],
  y: [100, 150, 130, 170, 200],

  // ラベルのデータ（y値と異なるテキストも可）
  text: [100, 150, 130, 170, 200].map(v => v.toLocaleString()),
  textposition: 'outside',    // 'inside' | 'outside' | 'auto' | 'none'

  // スタイル
  textfont: { size: 12, color: '#374151' },

  // 円グラフの場合
  // textinfo: 'percent+label',
  // texttemplate: '%{label}: %{percent:.1%}',
}];

// Chart.js: chartjs-plugin-datalabels プラグインを使用
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { Chart } from 'chart.js';

Chart.register(ChartDataLabels);

const options = {
  plugins: {
    datalabels: {
      display: true,
      anchor: 'end',           // 'start' | 'center' | 'end'
      align: 'top',            // 'top' | 'bottom' | 'left' | 'right' | 'center'

      // フォーマッタ
      formatter: (value, context) => value.toLocaleString(),

      // スタイル
      font: { size: 11, weight: 'bold' },
      color: '#374151',

      // 条件付き表示（閾値以上のみ）
      display: (context) =>
        context.dataset.data[context.dataIndex] > 50,

      // 重なり防止
      clamp: true,
      clip: false,
    },
  },
};

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

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="category"

  enableLabel={true}                        // on/off
  label={(d) => d.value.toLocaleString()}   // カスタムフォーマット
  labelPosition="end"                       // 'start' | 'middle' | 'end'
  labelSkipWidth={32}   // 指定幅未満のバーはラベルを非表示（重なり防止）
  labelSkipHeight={12}  // 指定高さ未満のバーはラベルを非表示
  labelTextColor="#ffffff"                  // ラベルの文字色
/>

// 折れ線グラフ（ResponsiveLine）
<ResponsiveLine
  data={data}
  pointLabel={(point) => String(point.data.y)}
  pointLabelYOffset={-12}
/>

// ApexCharts: dataLabels オブジェクトで設定
const options = {
  dataLabels: {
    enabled: true,               // on/off

    // フォーマッタ
    formatter: (val, opts) => `${val.toLocaleString()}件`,

    // 表示位置の調整（棒グラフ）
    offsetY: -20,

    // スタイル
    style: {
      fontSize: '12px',
      fontFamily: 'inherit',
      fontWeight: 'bold',
      colors: ['#374151'],
    },

    background: {
      enabled: false,   // ラベルの背景を非表示
    },

    // ドロップシャドウ
    dropShadow: { enabled: false },
  },
};