A lightweight JavaScript library for creating customizable pie and donut charts using pure CSS Conic Gradients. Zero dependencies. High performance.
Pietry doesn't use Canvas or SVG. It leverages the browser's native rendering engine via
conic-gradient, ensuring your charts are crisp on any resolution and lightweight on the
DOM.
Include the Pietry files in your project. You need both the JavaScript logic and the basic structural CSS.
<link rel="stylesheet" href="pietry.css">
<script src="pietry.js"></script>Define your data array and initialize the class with a configuration object.
const data = [
{ name: "Development", percentage: 60, color: "#510BA6" },
{ name: "Design", percentage: 40, color: "#0B68A6" }
];
new Pietry({
element: "my-chart-id",
size: 200,
borderWidth: 20,
list: data
}).display();| Property | Type | Default | Description |
|---|---|---|---|
| element | string | - | Required. The ID of the container element. |
| list | Array | - | Array of objects with name, percentage,
and color. |
| size | number | 0 | Outer diameter of the chart. |
| borderWidth | number | 0 | Thickness of the chart segments. Set to half of size for a full pie. |
| contentHTML | string | "" | HTML content to display in the center (Donut hole). |
See how flexible Pietry can be with a few lines of configuration.