Fusion UI

Overview

PieChart shows the shares of a whole, as pie or doughnut with the total in the middle.

"use client";

import React from "react";
import {PieChart, PieChartData} from "@brynlabs/fusion-ui";

export const PieChartExample = () => {
  const data: PieChartData = {
    data: [
      {value: 50, name: "Sehr zufrieden"},
      {value: 30, name: "Zufrieden"},
      {value: 20, name: "Unzufrieden"},
    ],
    colors: "spectrum",
  };

  return <PieChart data={data} layoutStacked={false} />;
};

Playground

{
  "data": [
    {
      "value": 50,
      "name": "Sehr zufrieden"
    },
    {
      "value": 30,
      "name": "Zufrieden"
    },
    {
      "value": 20,
      "name": "Unzufrieden"
    }
  ],
  "colors": "spectrum"
}

{
  "data": [
    {
      "value": 50,
      "name": "Sehr zufrieden"
    },
    {
      "value": 30,
      "name": "Zufrieden"
    },
    {
      "value": 20,
      "name": "Unzufrieden"
    }
  ],
  "colors": "spectrum"
}

layoutStacked

doughnut

import { PieChart } from "@brynlabs/fusion-ui"

<PieChart
  data={{
  "data": [
    {
      "value": 50,
      "name": "Sehr zufrieden"
    },
    {
      "value": 30,
      "name": "Zufrieden"
    },
    {
      "value": 20,
      "name": "Unzufrieden"
    }
  ],
  "colors": "spectrum"
}}
  chartTitle={"Zufriedenheit"}
  total={"100"}
  layoutStacked={true}
  doughnut={true}>
</PieChart>

Pie Chart

Overview

Playground