Skip to main content
Chart-based components are built on top of Chart.js.

​
Global configuration

You can extend or override default Chart.js settings of all chart components by providing a globalChartConfigProps function to the ThemeProvider component. This function accepts the config object from Chart.js as an argument and should return the modified config object with your configurations applied. 
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. 
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);
          },
        },
      })}
    />
  );
}
⌘I