Arc Pie Chart

pie chart that can be divided into several steps with Typescript

Install

npm install arc-pie-chart

Usage

It's just example

parageters

• data : See the data format below.
• totalDepth: your data's depth. (example is 3)
• size: chart's px width
  • default is 500
  • you can change it by using css

declaration

import makePieChart from "arc-pie-chart";

const data = [...]

const chart = makePieChart(data, totalDepth, size); // svg tag <svg></svg>

React

import React, { useEffect, useRef } from "react";
import makePieChart from "arc-pie-chart";
import { data } from "./data";

function App() {
  const svg = useRef(null);
  const totalDepth = 3; // data's depth
  const size = 500; // px size

  useEffect(() => {
    if (svg.current) {
      svg.current.appendChild(makePieChart(data, totalDepth, size));
    }
  });

  return <div ref={svg} />;
}

export default App;

data format

• You can create multi-level pie charts by connecting data arrays.
• The sum of the percentages must be less than one hundred percent

const data = [
  {
    name: "INCOME",
    percentage: 55,
    color: "crimson",
    textColor: "black",
    data: [
      {
        name: "SALARY",
        percentage: 30,
        color: "crimson",
        textColor: "white",
      },
      {
        name: "BLOG",
        percentage: 30,
        color: "crimson",
        textColor: "white",
      },
      {
        name: "ETC",
        percentage: 40,
        color: "crimson",
        textColor: "white",
        data: [
          {
            name: "STOCK",
            percentage: 60,
            color: "crimson",
            textColor: "white",
          },
          {
            name: "GOLD",
            percentage: 40,
            color: "crimson",
            textColor: "white",
          },
        ],
      },
    ],
  },
  {
    name: "EXPENSE",
    percentage: 45,
    color: "#3BB6AE",
    textColor: "black",
    data: [
      {
        name: "EAT",
        percentage: 10,
        color: "#3BB6AE",
        textColor: "black",
      },
      {
        name: "LIFE",
        percentage: 20,
        color: "#3BB6AE",
        textColor: "black",
      },
      {
        name: "SHOPPING",
        percentage: 10,
        color: "#3BB6AE",
        textColor: "black",
      },
      {
        name: "BUS",
        percentage: 20,
        color: "#3BB6AE",
        textColor: "black",
        data: [
          {
            name: "FAST",
            percentage: 50,
            color: "#3BB6AE",
            textColor: "black",
          },
          {
            name: "SLOW",
            percentage: 50,
            color: "#3BB6AE",
            textColor: "black",
          },
        ],
      },
      {
        name: "HEALTH",
        percentage: 10,
        color: "#3BB6AE",
        textColor: "black",
      },
      {
        name: "CULTURE",
        percentage: 10,
        color: "#3BB6AE",
        textColor: "black",
      },
      {
        name: "ETC",
        percentage: 20,
        color: "#3BB6AE",
        textColor: "black",
      },
    ],
  },
];