軸（Axis）の設定

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

// 基本的な軸設定
<LineChart data={data}>
  <XAxis
    dataKey="month"
    // ラベルフォーマット
    tickFormatter={(value) => `${value}月`}
    // ラベルの回転
    tick={{ angle: -45, textAnchor: 'end' }}
    interval={0}
  />
  <YAxis
    // 軸の範囲指定
    domain={[0, 5000]}
    // 目盛りの数
    tickCount={6}
    // 値フォーマット
    tickFormatter={(v) => v.toLocaleString()}
  />
  {/* グリッド線スタイル */}
  <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
</LineChart>

// 対数スケール
<YAxis scale="log" domain={['auto', 'auto']} />

// 複数Y軸
<LineChart data={data}>
  <YAxis yAxisId="left" />
  <YAxis yAxisId="right" orientation="right" />
  <Line dataKey="revenue" yAxisId="left" />
  <Line dataKey="ratio"   yAxisId="right" stroke="#10b981" />
</LineChart>

// ECharts: xAxis / yAxis オブジェクトで設定
const option = {
  xAxis: {
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    axisLabel: {
      // ラベルフォーマット
      formatter: (value) => `${value}`,
      // 回転
      rotate: 45,
      interval: 0,
    },
    axisLine: { lineStyle: { color: '#d1d5db' } },
  },

  // 複数Y軸（配列で定義）
  yAxis: [
    {
      type: 'value',
      name: '売上',
      min: 0,
      max: 5000,
      // 目盛り間隔
      splitNumber: 5,
      axisLabel: {
        formatter: (v) => v.toLocaleString(),
      },
      splitLine: {
        lineStyle: { type: 'dashed', color: '#e5e7eb' },
      },
    },
    {
      type: 'value',
      name: '比率 (%)',
      // 対数スケール
      // type: 'log',
      axisLabel: { formatter: (v) => `${v}%` },
      splitLine: { show: false },
    },
  ],

  series: [
    { type: 'bar',  data: [...], yAxisIndex: 0 },
    { type: 'line', data: [...], yAxisIndex: 1 },
  ],
};

// Plotly.js: layout の xaxis / yaxis で設定
const layout = {
  xaxis: {
    // ラベルフォーマット（d3-format 記法 or ticktext）
    tickformat: '%m月',    // 日付の場合
    // tickvals: [1,2,3], ticktext: ['Jan','Feb','Mar'], // カスタム目盛り
    // ラベルの回転
    tickangle: -45,
    // 目盛り間隔
    dtick: 1,
    gridcolor: '#e5e7eb',
    gridwidth: 1,
    zeroline: false,
  },

  yaxis: {
    // 範囲指定
    range: [0, 5000],
    // 対数スケール
    type: 'log',
    // 目盛りの数
    nticks: 6,
    tickformat: ',',       // 数値フォーマット（カンマ区切り）
    gridcolor: '#e5e7eb',
  },

  // 複数軸（右側Y軸）
  yaxis2: {
    title: '比率 (%)',
    overlaying: 'y',
    side: 'right',
    showgrid: false,
  },
};

// 複数軸を使う系列に yaxis: 'y2' を指定
const data = [
  { type: 'bar',  y: [100,200,150], yaxis: 'y'  },
  { type: 'line', y: [10, 20, 15],  yaxis: 'y2' },
];

// Chart.js: options.scales でキーごとに設定
const options = {
  scales: {
    x: {
      ticks: {
        // ラベルフォーマット
        callback: (value, index) => `${labels[index]}月`,
        // 回転
        maxRotation: 45,
        minRotation: 45,
      },
      grid: {
        color: '#e5e7eb',
        borderDash: [4, 4],
      },
    },

    y: {
      // 範囲指定
      min: 0,
      max: 5000,
      // 対数スケール
      type: 'logarithmic',
      // 目盛り間隔
      ticks: {
        stepSize: 1000,
        callback: (v) => v.toLocaleString(),
      },
      grid: { color: '#e5e7eb' },
    },

    // 複数軸（右側Y軸）
    y2: {
      type: 'linear',
      position: 'right',
      ticks: { callback: (v) => `${v}%` },
      grid: { drawOnChartArea: false }, // メインのグリッドと重ならないように
    },
  },
};

// 複数軸を使うデータセットに yAxisID を指定
const data = {
  datasets: [
    { label: '売上', data: [...], yAxisID: 'y'  },
    { label: '比率', data: [...], yAxisID: 'y2' },
  ],
};

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

<ResponsiveLine
  data={data}

  // X軸の設定
  axisBottom={{
    // ラベルフォーマット
    format: (value) => `${value}月`,
    // 目盛り数（値の配列で明示的に指定）
    tickValues: 6,
    tickRotation: -45,
    legend: 'Month',
    legendOffset: 36,
  }}

  // Y軸の設定
  axisLeft={{
    format: (value) => value.toLocaleString(),
    tickValues: 5,
    legend: '売上',
    legendOffset: -50,
  }}

  // 軸の範囲は yScale / xScale で制御
  yScale={{
    type: 'linear', // 'log' も指定可能
    min: 0,
    max: 'auto',
    stacked: false,
  }}

  // グリッド
  enableGridX={false}
  enableGridY={true}
  gridYValues={5}

  // ※ Nivo は複数軸（デュアルY軸）には非対応
/>

// ApexCharts: xaxis / yaxis オブジェクトで設定
const options = {
  xaxis: {
    categories: ['1月', '2月', '3月', '4月', '5月'],
    labels: {
      // ラベルフォーマット
      formatter: (value) => `${value}`,
      // 回転
      rotate: -45,
      rotateAlways: true,
    },
    // 目盛りの数
    tickAmount: 5,
  },

  // 複数Y軸（配列で定義）
  yaxis: [
    {
      // 範囲指定
      min: 0,
      max: 5000,
      // 対数スケール
      logarithmic: true,
      labels: {
        formatter: (val) => val.toLocaleString(),
      },
    },
    // 右側Y軸
    {
      opposite: true,
      title: { text: '比率 (%)' },
      labels: { formatter: (v) => `${v}%` },
    },
  ],

  // グリッド線スタイル
  grid: {
    borderColor: '#e5e7eb',
    strokeDashArray: 4,
    xaxis: { lines: { show: false } },
    yaxis: { lines: { show: true } },
  },
};