Chart colors are controlled within the same theme object used by the <ThemeProvider>. This allows you to define palettes that are consistent with your brand and that can automatically adapt to light and dark modes.

​
The Chart Palette System

Chart styling uses a simple override system. You can set a default color palette for all charts and then, if needed, provide specific palettes for individual chart types.

​
The Global Fallback: defaultChartPalette

The defaultChartPalette is the fastest way to apply a consistent color scheme. The array of colors you provide will be used for all chart types that do not have a more specific palette defined. 
<ThemeProvider
  theme={{
    // This palette will apply to line, bar, pie charts, etc.
    defaultChartPalette: [
      "#34495e",
      "#16a085",
      "#f39c12",
      "#e74c3c",
      "#8e44ad",
    ],
  }}
>
  {/* application components */}
</ThemeProvider>

​
Specific Overrides: barChartPalette, lineChartPalette

For more detailed control, you can define a unique color palette for each chart type. A specific palette, like barChartPalette, will always be used instead of the defaultChartPalette for that chart type. This example sets a default for all charts but provides a unique color set just for bar charts. 
<ThemeProvider
  theme={{
    // Specific palette for BarChart
    barChartPalette: [
      "#1f77b4",
      "#ff7f0e",
      "#2ca02c",
    ],
    // Fallback palette for all other chart types
    defaultChartPalette: [
      "#34495e",
      "#16a085",
      "#f39c12",
    ],
  }}
>
  {/* Your C1Component */}
</ThemeProvider>

​
Available 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
}

​
Applying Palettes with Light and Dark Modes

You can define different chart palettes for your theme and darkTheme objects. This is useful for creating separate light and high contrast dark theme. 
const lightTheme = {
  // Palettes for light mode
  areaChartPalette: ["#2563eb", "#dc2626", "#16a34a"],
  defaultChartPalette: ["#374151", "#111827", "#1f2937"],
};

const darkTheme = {
  // High-contrast palettes for dark mode
  areaChartPalette: ["#3b82f6", "#ef4444", "#22c55e"],
  defaultChartPalette: ["#d1d5db", "#f3f4f6", "#e5e7eb"],
};

<ThemeProvider
  mode="dark"
  theme={lightTheme}
  darkTheme={darkTheme}
>
  {/* Your C1Component */}
</ThemeProvider>;
Area Chart with Light Theme

Area Chart with Light Theme