simple-pie

simple-pie creates simple svg pie and doughnut charts for infographics like graphs and others in browser environments.

Installation

npm install simple-pie --save

pnpm add simple-pie

yarn add simple-pie

Usage

import {simplePie, simpleDoughnut} from "simple-pie";

const svgPie = simplePie([2, 1, 1, 2]);
const svgDoughnut = simpleDoughnut([2, 1, 1, 2]);

document.body.appendChild(svgPie);
document.body.appendChild(svgDoughnut);

The svg height and width are 100%, so it trys to extend itself to available space. Thus, you should have wrapper with dimensions for your simple-pie diagram.

Or just add element attributes:

svgPie.setAttribute("width", "50");
svgPie.setAttribute("height", "50");

Interface

// Pie
type TPieOptions = {
  pallet?: string[];
  borderColor?: string;
  borderWidth?: number;
};

function simplePie(
  values: number[],
  options?: TPieOptions
): SVGElement;

// Doughnut
type TDoughnutOptions = TPieOptions & {
  inner?: number;                         // 0..1 - percent from outer radius
};

function simpleDoughnut(
  values: number[],
  options: TDoughnutOptions = {}
): SVGElement

Examples

  simplePie([2, 1, 1, 2])

simplePie([2, 1, 1, 2], {
  borderColor: "transparent"
})

simpleDoughnut([2, 1, 1, 2], {
  borderWidth: 3
})

simpleDoughnut([2, 1, 1, 2], {
  borderColor: "transparent",
  inner: 0.3,
})

Guides

HTML page

<div id="pie-container"></div>
<div id="doughnut-container"></div>

<script src="simple-pie.min.js"></script>
<script>
    const svgPieElement = simplePie([2, 1, 1, 2]);
    document.getElementById('pie-container').appendChild(svgPieElement);

    const svgDoughnutElement = simpleDoughnut([2, 1, 1, 2]);
    document.getElementById('doughnut-container').appendChild(svgDoughnutElement);
</script>

As data-uri image

import {simplePie} from "simple-pie";

const element = simplePie([2, 1, 1, 2]);
element.setAttribute("width", "70");
element.setAttribute("height", "70");

const svg = new XMLSerializer().serializeToString(element);
const dataUri = `data:image/svg+xml;base64,${btoa(svg)}`;

// Example for vis-network diagram
const nodes = new DataSet([{
  id: 1,
  shape: "image",
  image: dataUri,
  shapeProperties: { useImageSize: true },
},
...