Lightweight Pie/Donut Charts with CSS Conic Gradients – Pietry

Pietry is a lightweight and dependency-free JavaScript library that generates customizable pie and ring(donut) charts using CSS conic gradients. No SVG & Canvas required.

Features

• Dual Chart Modes: Create full pie charts or ring charts by toggling the contentHTML option.
• Flexible Sizing: Configure chart dimensions using any CSS measurement unit (px, rem, em, vh, vw).
• Color Customization: Define custom colors for each data segment with standard hex, RGB, or named color values.

Use Cases

• Admin Dashboards: Display server status or user distribution statistics quickly.
• Budget Trackers: Visualize expense categories in personal finance applications.
• Portfolio Skills: Show proficiency levels in various technologies using ring charts.
• Progress Indicators: Create circular progress bars for task completion rates.

How To Use This Pie Chart Library:

1. Download the library files and load them in your HTML document:

<link rel="stylesheet" href="pietry.css">
<script src="./pietry.js"></script>

2. Create the container elements for your pie chart:

<!-- Main chart container with unique ID -->
<div id="chart-example">
  <!-- Border element that displays the conic gradient -->
  <div class="pietry-chart-border">
    <!-- Content area for ring charts or center labels -->
    <div class="pietry-chart-content"></div>
  </div>
</div>

<!-- Breakdown list container -->
<div id="chart-breakdown" class="chart-breakdown"></div>
<!-- Template for breakdown items (hidden by default) -->
<div class="chart-item" id="tmpl-chart-item" style="display: none;">
  <div class="chart-item-indicator"></div>
  <div class="chart-item-name"></div>
</div>

3. Define your chart segments as an array of objects:

const data = [
  {
    name: "Feature Development",
    percentage: 45,
    color: "#4CAF50", // Green
  },
  {
    name: "Bug Fixes",
    percentage: 20,
    color: "#F44336", // Red
  },
  {
    name: "Refactoring",
    percentage: 15,
    color: "#2196F3", // Blue
  },
  {
    name: "Code Review & Planning",
    percentage: 10,
    color: "#FFEB3B", // Yellow
  },
  {
    name: "Documentation",
    percentage: 10,
    color: "#9C27B0", // Purple
  },
];

4. Initialize Pietry with your configuration object.

const chart = new Pietry({
   color: "black",  // Not currently used in rendering
   borderWidth: 16,  // Width of the chart ring in measurement units
   size: 108,  // Total chart diameter
   contentBackgroundColor: "white",  // Background color of center area
   measurementUnit: "px",  // CSS unit for size values
   list: data,  // Your data array
   element: "chart-example",  // Container element ID (without #)
   contentHTML: "CSSScript.com"  // Optional: converts to ring chart with center content
});

5. Render the chart to the DOM:

chart.display();

6. Pietry handles the chart visualization. It does not automatically generate a legend. You can use this helper function to render the breakdown based on the HTML template you just created.

const render = {
  chartItems(data, element) {
    let el = document.querySelector(element);
    if (el) {
      for (let item of data) {

        // Clone the hidden template element
        let tmpl = document.getElementById("tmpl-chart-item").cloneNode(true);
        tmpl.removeAttribute("id");
        tmpl.style.display = "flex";

        // Set the color indicator background
        tmpl.querySelector(".chart-item-indicator").style.backgroundColor = item.color;

        // Set the item name and percentage text
        tmpl.querySelector(".chart-item-name").innerText = `${item.name} (${item.percentage}%)`;
        el.appendChild(tmpl);
      }
    }
  }
};

// Render breakdown items into the container
render.chartItems(data, "#chart-breakdown");

Alternatives:

• 10 Best Pie/Donut Chart Plugins In JavaScript

FAQs

Q: Can I animate the chart when percentages change?
A: The library does not include built-in animation support. CSS conic gradients cannot be animated through CSS transitions because gradient values are not interpolatable properties.

Q: How do I handle data that doesn’t sum to 100%?
A: The library renders whatever percentages you provide without validation. If your data sums to less than 100%, the remaining portion will display as empty space using the contentBackgroundColor. If the sum exceeds 100%, segments will overlap and only the last-defined colors will be visible in the overlapping regions.

Q: Can I add click handlers to individual chart segments?

A: The current implementation renders the entire chart as a single gradient background. Individual segments are not separate DOM elements, so you cannot attach click handlers directly to them.

Q: Does the library support responsive sizing?
A: Yes, you can use relative CSS units like rem, em, vh, or vw by setting the measurementUnit option. The chart will scale with its container when using these units.

The post Lightweight Pie/Donut Charts with CSS Conic Gradients – Pietry appeared first on CSS Script.