Pie Chart

Displays data in a pie chart.
Psychology
Business
Biology
Example
Source Code
Installation
"use client";

import React from "react";
import { PieChart } from "@/ui/components/PieChart";

function PieChartExample() {
  return (
    <PieChart
      category={"Graduates"}
      data={[
        { Major: "Psychology", Graduates: 180 },
        { Major: "Business", Graduates: 160 },
        { Major: "Biology", Graduates: 140 },
      ]}
      index={"Major"}
    />
  );
}

export default PieChartExample;

Props

Pie Chart
This component has no additional props.

Examples

Customizing the Legend

Use the legend slot to render a custom legend. The SubframeCore.ChartLegend can receive any of the props from the Recharts Legend component.

Legend on bottom left

Psychology
Business
Biology

Custom rendered legend

PsychologyBusinessBiology

Custom Tooltip

Use the tooltip slot to render a custom tooltip. The SubframeCore.ChartTooltip can receive any of the props from the Recharts Tooltip component.

Psychology
Business
Biology