色・スタイルのカスタマイズ

import { BarChart, Bar, Cell } from 'recharts';

// Cell コンポーネントで個別要素の色を指定
const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];

<BarChart data={data}>
  <Bar dataKey="value" stroke="#1d4ed8" strokeWidth={1} fillOpacity={0.85}>
    {data.map((_, i) => (
      <Cell key={i} fill={colors[i % colors.length]} />
    ))}
  </Bar>
</BarChart>

// SVGグラデーション + fillOpacity でフェード効果
<BarChart data={data}>
  <defs>
    <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%"  stopColor="#3b82f6" stopOpacity={0.9} />
      <stop offset="95%" stopColor="#3b82f6" stopOpacity={0.3} />
    </linearGradient>
  </defs>
  <Bar dataKey="value" fill="url(#grad)" />
</BarChart>

// 条件付き色分け（値で色を切り替え）
<Bar dataKey="value">
  {data.map((entry, i) => (
    <Cell key={i} fill={entry.value > 100 ? '#10b981' : '#ef4444'} />
  ))}
</Bar>

// ECharts: カラーパレット・グラデーション・個別色指定
const option = {
  // グローバルカラーパレット
  color: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],

  series: [{
    type: 'bar',
    // 個別データへの色指定
    data: [
      { value: 120, itemStyle: { color: '#ef4444' } },
      { value: 200, itemStyle: { color: '#3b82f6' } },
      { value: 150 }, // パレットから自動割り当て
    ],
    // グラデーション（全バーに適用）
    itemStyle: {
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: '#3b82f6' },
          { offset: 1, color: '#93c5fd' },
        ],
      },
      borderColor: '#1d4ed8',
      borderWidth: 1,
      opacity: 0.85,
    },
  }],

  // visualMap で条件付き色分け（値の範囲でグラデーション）
  visualMap: {
    min: 0, max: 300,
    inRange: { color: ['#93c5fd', '#1d4ed8'] },
    show: false,
  },
};

// Plotly.js: marker.color で色・スタイルを制御
const data = [{
  type: 'bar',
  x: ['1月', '2月', '3月', '4月', '5月'],
  y: [100, 200, 150, 250, 180],

  marker: {
    // 個別色指定（配列）
    color: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],

    // カラースケールでグラデーション（値に連動）
    // color: [100, 200, 150, 250, 180],
    // colorscale: 'Blues',
    // showscale: true,

    opacity: 0.85,
    line: {
      color: '#1d4ed8',
      width: 1.5,
    },
  },
}];

// 条件付き色分け
const colors = data[0].y.map(v => v > 180 ? '#10b981' : '#3b82f6');

// Chart.js: backgroundColor / borderColor で色を設定
const data = {
  labels: ['1月', '2月', '3月', '4月', '5月'],
  datasets: [{
    label: '売上',
    // 個別色指定（配列）
    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
    borderColor: ['#1d4ed8', '#059669', '#d97706', '#dc2626', '#7c3aed'],
    borderWidth: 1,
    // 透明度は rgba で指定
    // backgroundColor: 'rgba(59,130,246,0.8)',
  }],
};

// グラデーションは canvas API で作成
// const createGradient = (ctx, chartArea) => {
//   const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
//   gradient.addColorStop(0, 'rgba(59,130,246,0.9)');
//   gradient.addColorStop(1, 'rgba(59,130,246,0.1)');
//   return gradient;
// };

// 条件付き色分け（関数でも指定可）
// backgroundColor: (ctx) => ctx.parsed.y > 180 ? '#10b981' : '#3b82f6',

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

<ResponsiveBar
  data={data}
  keys={['sales', 'target']}

  // カラースキームを指定
  colorScheme="tableau10"

  // または個別色指定
  colors={['#3b82f6', '#10b981']}

  // 条件付き色分け（関数）
  // colors={({ id, data }) => data[`${id}Color`]}

  // ボーダー
  borderColor={{ from: 'color', modifiers: [['darker', 1.4]] }}
  borderWidth={1}

  // テーマでグローバルなスタイル設定
  theme={{
    background: '#ffffff',
    text: { fill: '#374151', fontSize: 12 },
    grid: { line: { stroke: '#e5e7eb', strokeWidth: 1 } },
    axis: {
      ticks: { line: { stroke: '#d1d5db' } },
    },
  }}

  // fillOpacity 相当は theme 内の透明度設定で対応
/>

// ApexCharts: colors / fill で色・スタイルを制御
const options = {
  // カラーパレット
  colors: ['#3b82f6', '#10b981', '#f59e0b'],

  fill: {
    // グラデーション
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: 'vertical',
      shadeIntensity: 0.5,
      gradientToColors: ['#93c5fd', '#6ee7b7', '#fcd34d'],
      opacityFrom: 0.9,
      opacityTo: 0.4,
    },
    // 単色の場合は type: 'solid', opacity: 0.85
  },

  stroke: {
    colors: ['#1d4ed8', '#059669', '#d97706'],
    width: 1,
  },

  // 条件付き色分け（colors に関数は非対応。dataLabels や annotations で代替）
  // 値によって色を変えたい場合は distributed: true + 各系列に color を設定
  plotOptions: {
    bar: { distributed: true },
  },
};