> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Charts

> Control the appearance of charts by defining global and chart-specific color palettes.

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.

```tsx theme={null}
<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.

```tsx theme={null}
<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

```typescript theme={null}
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.

```tsx theme={null}
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>;
```

<Tabs>
  <Tab title="Light Theme">
    <Frame caption="Area Chart with Light Theme">
      <img src="https://mintcdn.com/thesys/C1mGp0p_ygBsZ7UI/images/charts/light-area-theme.png?fit=max&auto=format&n=C1mGp0p_ygBsZ7UI&q=85&s=d6db8040908f5daed76c1e659e35f63d" alt="Area Chart with Light Theme" width="3600" height="2008" data-path="images/charts/light-area-theme.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Theme">
    <Frame caption="Area Chart with Dark Theme">
      <img src="https://mintcdn.com/thesys/C1mGp0p_ygBsZ7UI/images/charts/dark-area-theme.png?fit=max&auto=format&n=C1mGp0p_ygBsZ7UI&q=85&s=7245c734c93de6b89f8b1f91d41d06b8" alt="Area Chart with Dark Theme" width="3600" height="2008" data-path="images/charts/dark-area-theme.png" />
    </Frame>
  </Tab>
</Tabs>