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

# Chart.js configuration

> Customize Chart.js configuration.

<div />

Chart-based components are built on top of [Chart.js](https://www.chartjs.org/).

## Global configuration

You can extend or override default Chart.js settings of all chart components by providing a `globalChartConfigProps`
function to the [`ThemeProvider`](/docs/embeddable-ui/components/theme-provider) component.

This function accepts the
[config object](https://www.chartjs.org/docs/latest/configuration/) from Chart.js as an argument and should return the
modified config object with your configurations applied.

```jsx theme={"system"}
import { ThemeProvider, Counter } from "@propeldata/ui-kit";

function ThemeProviderComponent() {
  return (
    <ThemeProvider
      globalChartConfigProps={(chartConfig) => (
        (chartConfig.options = {
          ...chartConfig.options,
          plugins: {
            ...chartConfig.options?.plugins,
            tooltip: {
              ...chartConfig.options?.plugins?.tooltip,
              backgroundColor: "#532ab4",
              titleColor: "#ffffff",
              borderWidth: 3,
            },
          },
        }),
        chartConfig
      )}
    >
      <Leaderboard
        headers={["Book title", "Total sold"]}
        rows={[
          ["John's way or Highway", "12863002"],
          ["How to Speak Native Animal", "7865371"],
          ["Cell Lost in a Sea of Desert", "622027"],
          ["Flying nowhere special", "462791"],
          ["The Lean Product Book", "1"],
        ]}
      />
    </ThemeProvider>
  );
}
```

## Component-level configuration

You can customize the chart settings at the component level by utilizing the `chartConfigProps` prop. This prop accepts
a function that receives the chart's current configuration object specific to a chart type. Within this function, you
can modify and return the configuration object to tailor the chart's appearance and behavior to your needs. The changes
made through `chartConfigProps` will only affect the particular instance of the chart.

```jsx theme={"system"}
import {
  TimeSeries,
  RelativeTimeRange,
  TimeSeriesGranularity,
} from "@propeldata/ui-kit";

function TimeSeriesComponent() {
  return (
    <TimeSeries
      variant="bar"
      query={{
        accessToken: "<PROPEL_ACCESS_TOKEN>",
        metric: "Revenue",
        timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
        granularity: "DAY",
      }}
      chartConfigProps={(config) => ({
        ...config,
        options: {
          ...config.options,
          onClick: (event, elements) => {
            console.log("chartOnClickStory", event, elements);
          },
        },
      })}
    />
  );
}
```