Using your own data

In our examples, we use a default data set that is built into the component, like this:

Typescript

const data = [
  { key: "Technology", value: 38.1 },
  { key: "Financials", value: 25.3 },
  { key: "Energy", value: 23.1 },
  { key: "Cyclical", value: 19.5 },
  { key: "Defensive", value: 14.7 },
  { key: "Utilities", value: 5.8 },
].toSorted((a, b) => b.value - a.value);

export function BarChartHorizontal_DIV() {
// Rest of the code

However, in practice, you will want to use your own data. We recommend two ways of doing this:

Populate data within the chart component (from a database or API) - this pairs nicely with RSCs.
Pass down a data prop from a parent component.

1. Populating `data` within the chart component

Using data from Supabase as an example - error handling is not included for brevity:

Typescript


export function BarChart() {
  const supabase = createClient();
  const { data: sectorsData, error } = await supabase.from("sectors").select("name, performance");

  const data = sectorsData.map((sector) => ({
    key: sector.name,
    value: sector.performance,
  }));

  // Sort or slice the data as needed

2. Passing down `data` from a parent component

export function ParentComponent() {
  const data = [
    { key: "Technology", value: 38.1 },
    { key: "Financials", value: 25.3 },
    { key: "Energy", value: 23.1 },
  ];
  return <BarChart data={data} />;
}