グリッド線のカスタマイズ

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

// CartesianGrid でグリッド線を制御
<LineChart data={data}>
  <CartesianGrid
    strokeDasharray="3 3"      // 破線パターン（"" で実線、"3 3" で破線、"1 1" で点線）
    stroke="#e5e7eb"           // 線の色
    strokeWidth={1}            // 線の太さ
    opacity={0.7}              // 透明度

    // 水平/垂直グリッドの個別制御
    horizontal={true}          // 水平グリッド（Y軸方向）を表示
    vertical={false}           // 垂直グリッド（X軸方向）を非表示
  />
  <XAxis dataKey="month" />
  <YAxis />
  <Line type="monotone" dataKey="value" />

  {/* リファレンスライン（目標値・基準線） */}
  <ReferenceLine y={100} stroke="#ef4444" strokeDasharray="4 2" label="目標" />
</LineChart>

// ECharts: splitLine（グリッド線）と splitArea（ストライプ）
const option = {
  // グリッド領域のマージン
  grid: {
    left: '10%',
    right: '5%',
    top: '10%',
    bottom: '15%',
    containLabel: true,
  },

  yAxis: {
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',         // 'solid' | 'dashed' | 'dotted'
        color: '#e5e7eb',
        width: 1,
        opacity: 0.7,
      },
    },
    // ストライプ背景（交互色）
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(240,240,240,0.3)', 'transparent'],
      },
    },
  },

  xAxis: {
    splitLine: { show: false },  // 垂直グリッドを非表示
  },

  // リファレンスライン
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70, 110],
    markLine: {
      data: [{ yAxis: 100, name: '目標' }],
      lineStyle: { color: '#ef4444', type: 'dashed' },
    },
  }],
};

// Plotly.js: layout の各軸でグリッドを設定
const layout = {
  yaxis: {
    showgrid: true,            // グリッド表示/非表示
    gridcolor: '#e5e7eb',      // 線の色
    gridwidth: 1,              // 線の太さ
    griddash: 'dot',           // 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot'
    zeroline: false,           // ゼロライン
  },

  xaxis: {
    showgrid: false,           // 垂直グリッドを非表示
    showline: true,
    linecolor: '#d1d5db',
  },

  // 背景色
  plot_bgcolor: '#f9fafb',
  paper_bgcolor: '#ffffff',

  // リファレンスライン（shapes で描画）
  shapes: [{
    type: 'line',
    x0: 0, x1: 1, xref: 'paper',
    y0: 100, y1: 100, yref: 'y',
    line: { color: '#ef4444', width: 1.5, dash: 'dash' },
  }],
};

// Chart.js: scales の grid オプションで制御
const options = {
  scales: {
    y: {
      grid: {
        display: true,         // グリッド表示/非表示
        color: '#e5e7eb',      // グリッド線の色
        lineWidth: 1,          // 線の太さ
        borderDash: [4, 4],    // 破線パターン

        // 特定の線だけスタイルを変える（コールバック形式）
        // color: (context) =>
        //   context.tick.value === 0 ? '#9ca3af' : '#e5e7eb',
        // lineWidth: (context) =>
        //   context.tick.value === 0 ? 2 : 1,
      },
    },

    x: {
      grid: {
        display: false,        // 垂直グリッドを非表示
      },
    },
  },
};

import { ResponsiveLine } from '@nivo/line';

<ResponsiveLine
  data={data}

  // グリッドの表示/非表示
  enableGridX={false}           // 垂直グリッドを非表示
  enableGridY={true}            // 水平グリッドを表示

  // 表示する目盛り値を指定（この値の位置にのみグリッドを描画）
  gridYValues={[0, 50, 100, 150, 200]}

  // テーマでグリッド線スタイルを変更
  theme={{
    grid: {
      line: {
        stroke: '#e5e7eb',
        strokeWidth: 1,
        strokeDasharray: '4 4',   // 破線
      },
    },
  }}

  // リファレンスライン
  markers={[
    {
      axis: 'y',
      value: 100,
      lineStyle: { stroke: '#ef4444', strokeWidth: 1.5, strokeDasharray: '4 2' },
      legend: '目標',
    },
  ]}
/>

// ApexCharts: grid オブジェクトと annotations で設定
const options = {
  grid: {
    show: true,

    // グリッド全体のスタイル
    borderColor: '#e5e7eb',
    strokeDashArray: 4,          // 0=実線、>0=破線

    // 水平/垂直グリッドの個別制御
    xaxis: {
      lines: { show: false },    // 垂直グリッドを非表示
    },
    yaxis: {
      lines: { show: true },     // 水平グリッドを表示
    },

    // ストライプ背景（row）
    row: {
      colors: ['#f9fafb', 'transparent'],   // 交互色
      opacity: 0.5,
    },

    padding: { top: 0, right: 10, bottom: 0, left: 10 },
  },

  // リファレンスライン（annotations）
  annotations: {
    yaxis: [{
      y: 100,
      borderColor: '#ef4444',
      strokeDashArray: 4,
      label: {
        text: '目標',
        position: 'right',
        style: { color: '#ef4444', fontSize: '11px' },
      },
    }],
  },
};