This comprehensive guide explains all available theme palettes in the chart system and demonstrates how to override them at different levels.

​
Theme Palette System

​
Available Theme Palette Keys

interface ChartColorPalette {
  defaultChartPalette?: string[]; // Fallback for all charts
  barChartPalette?: string[]; // Specific to BarChart
  lineChartPalette?: string[]; // Specific to LineChart
  areaChartPalette?: string[]; // Specific to AreaChart
  pieChartPalette?: string[]; // Specific to PieChart
  radarChartPalette?: string[]; // Specific to RadarChart
  radialChartPalette?: string[]; // Specific to RadialChart
}

​
Basic Theme Override

import { ThemeProvider } from "@/components/ThemeProvider";

function App() {
  return (
    <ThemeProvider
      theme={{
        // Chart-specific palettes
        barChartPalette: [
          "#1f77b4",
          "#ff7f0e",
          "#2ca02c",
          "#d62728",
          "#9467bd",
        ],
        lineChartPalette: [
          "#e74c3c",
          "#3498db",
          "#2ecc71",
          "#f39c12",
          "#9b59b6",
        ],
        // Fallback palette for other chart types
        defaultChartPalette: [
          "#34495e",
          "#16a085",
          "#f39c12",
          "#e74c3c",
          "#8e44ad",
        ],
      }}
    >
      <C1Component c1Response={c1Response} />
    </ThemeProvider>
  );
}
Basic Theme Override

Basic Theme Override

​
Advanced Theme Setup with Light/Dark Mode

const lightTheme = {
  // Professional light theme colors
  areaChartPalette: ["#2563eb", "#dc2626", "#16a34a", "#ea580c", "#7c3aed"],
  lineChartPalette: ["#0891b2", "#be185d", "#65a30d", "#c2410c", "#7c2d12"],
  pieChartPalette: ["#1e40af", "#be123c", "#166534", "#9a3412", "#581c87"],
  defaultChartPalette: ["#374151", "#111827", "#1f2937", "#4b5563", "#6b7280"],
};

const darkTheme = {
  // High contrast dark theme colors
  areaChartPalette: ["#3b82f6", "#ef4444", "#22c55e", "#f97316", "#8b5cf6"],
  lineChartPalette: ["#06b6d4", "#ec4899", "#84cc16", "#f59e0b", "#a855f7"],
  pieChartPalette: ["#60a5fa", "#f87171", "#4ade80", "#fb923c", "#c084fc"],
  defaultChartPalette: ["#d1d5db", "#f3f4f6", "#e5e7eb", "#9ca3af", "#6b7280"],
};

<ThemeProvider mode="light" theme={lightTheme} darkTheme={darkTheme}>
  <C1Component c1Response={c1Response} />
</ThemeProvider>;
Area Chart with Light Theme

Area Chart with Light Theme