JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.1.1/browser/pixi.js" integrity="sha512-wkspHfuKFlenpKsDAxLXR/NZQth/6vQNxVr4qYb/MJA3Y7jQRLBRBJeoo4fClxxUU2nZp7eI/PsBm48M8VQ9bg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

JavaScript

/**
 * для вопроса https://qna.habr.com/q/1031850
 * PIXI.JS: как создать pie chart?
 */
const app = new PIXI.Application({ antialias: true, width: 300, height: 300, backgroundColor: 0xfbfcfc  });
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();

const data = [8, 31, 16, 45];

const total = data.reduce((acc, c) => acc + c);
const values = data.map((n) => n / total);
const colors = [0x2874a6 , 0xf4d03f , 0xe74c3c, 0x27ae60 ];
const center = {x: 100, y: 100};
const radius = 80;

const dooga = (value, color, twist, i) => {
  twist -= Math.PI / 2;
  graphics.beginFill(color);
  graphics.arc(center.x, center.y, radius, twist,  twist + value * 2 * Math.PI);
  graphics.arc(center.x, center.y, radius / 2, twist + value * 2 * Math.PI, twist, true);
  graphics.endFill();
}

values.reduce((acc, v, i) => {
  dooga(v, colors[i], acc, i);
  return acc + v * 2 * Math.PI;
}, 0);

app.stage.addChild(graphics);