React-simply-donut NPM

Easily integrate delightful and lightweight donut charts into your React applications with "React Simply Donut." This simple-to-use package provides a hassle-free way to add visually appealing donut charts to your projects.

Table of content

npm npm package minimized gzipped size (select exports) npm

Why

I had difficulty integrating a simple donut into an application. Therefore, I created one myself – simple and lightweight – and finally shared it.

Demo 💥

You can play with the demo here

Installation 🏗

Install react-simply-donut with npm, run:

npm i react-simply-donut

or if you prefer, you can use yarn:

yarn add react-simply-donut

Usage ✏

Here is a minimal example of using the package:

import React from "react";
import { SimplyDonut } from "react-simply-donut/donuts";
import { SimplyLegend } from "react-simply-donut/legends";

const data = [
  {
    value: 123,
    name: "value1",
  },
  {
    value: 97,
    name: "value2",
  },
  {
    value: 265,
    name: "value3",
  },
];

const DonutAndLegend = () => {
  return (
    <div>
      <div>
        <SimplyDonut data={data} />
      </div>
      <div>
        <h3>Legend title</h3>
        <SimplyLegend data={data} />
      </div>
    </div>
  );
};

API 🔗

SimplyDonut

This is the main component of the package

export type TDonutData = {
  name: string; // Donut section name
  value: number; // Donut section value
  color?: string; // Donut section color in hexadecimal format
};

export type TSimplyDonut = {
  data: TDonutData[]; // Data given for the entire donut chart
  size?: "sm" | "md" | "lg"; // Size of the donut chart
  inset?: {
    color?: string; // Color of the inner dot in hexadecimal format (default: "#cbd5e1")
    size?: number; // Donut thickness in percentage (between 5 and 45) (default: 12)
  };
};

const SimplyDonut = (props: TSimplyDonut) => {};

🚨 If the size property is not provided, the chart will extend to the boundaries of the parent block. To do this, the parent block must have a defined width and height, otherwise the graphic will not appear or will be completely flat.

SimplyPie

Note that is the same component than SimplyDonut without the inset props.

export TSimplyPie = Pick<TSimplyDonut, "data" | "size">;

// Pick<TSimplyDonut, "data" | "size"> type is equal to :
{
  data: TDonutData[]; // Data given for the entire pie chart
  size?: "sm" | "md" | "lg"; // Size of the pie chart. If not provided, look at the warning above.
};

const SimplyPie = (props: TSimplyPie) => {};

SimplyCircleProgressBar

This component displays a circle progress bar with your score

export type TSimplyCircleProgressBar = Pick<TSimplyDonut, "size" | "inset"> & {
  progress: number; // Value of the of the progress bar
  color?: string; // Color of the progress bar in hexadecimal format (default: "#FF5733")
  displayScore?: boolean; // Display the score inside the circle (default: true)
  remainingPortionOpacity?: number; // Apply a colored opacity on the remaining percentages (between 0 and 1 - based on the given color - default: 0.5)
};

// Pick<TSimplyDonut, "size" | "inset"> type is equal to :
{
  size?: "sm" | "md" | "lg"; // Size of the pie chart. If not provided, look at the warning above.
  inset?: {
    color?: string; // Color of the inner dot in hexadecimal format (default: "#cbd5e1")
    size?: number; // Donut thickness in percentage (between 5 and 45) (default: 12)
  };
};

const SimplyCircleProgressBar = (props: TSimplyCircleProgressBar) => {};

SimplyLegend

export type TSimplyLegend = {
  data: TDonutData[]; // data given for the entire donut chart (see SimplyDonut for more details)
  showPercentage?: boolean; // Display the corresponding percentage next to the value (default: false)
};

const SimplyLegend = (props: TSimplyLegend) => {};