Minimal Pie & Ring (Donut) Chart JavaScript Library – Charty

Category: Chart & Graph | June 14, 2021
Views Total:806 views
Official Page:Go to website
Last Update:June 14, 2021


Minimal Pie & Ring (Donut) Chart JavaScript Library – Charty


Charty is a tiny yer customizable JavaScript library that helps draw pie and ring charts (also called donut charts or circle charts) using plain JavaScript and CSS. No SVG and Canvas required.

How to use it:

1. Add the Charty’s JavaScript and Stylesheet to the page.

<link rel=”stylesheet” href=”./charty.css” />
<script src=”./charty.js”></script>

2. Generate a ring chart from the data you provide:

Charty Ring Chart

const chart = new Charty({
  title: 'Chart Title', 
  data: [
    {Stone: 24}, 
    {Wood: 7}, 
    {Steel: 29}

3. Generate a pie chart from the data you provide.

Charty Pie Chart

const another = new Charty({
  title: 'Pie Chart', 
  data: [
    {Stone: 24},
    {Wood: 7},
    {Steel: 29}
  chartType: 'pie'

4. All default parameters:

  • title: The title of the chart
  • chartType: The type of chart circle|pie
  • data: An array of objects in the pair format: name/vale {name: value}
  • precision: Determines whether the chart have decimal precision or not
  • selector: The html element where the chart will be insert, must be a valid css selector
new Charty({
  title = 'New Chart', 
  chartType = 'circle', 
  data = [{Test: 5}], 
  precision = false, 
  selector = 'body'

5. Add more data to the chart.

  "Name", Value

You Might Be Interested In:

2 thoughts on “Minimal Pie & Ring (Donut) Chart JavaScript Library – Charty

  1. Adrian Frutiger

    I loved how you have provided so many dats to add in the Chart JavaScript. Just now i realize i was adding wrong data’s for so long and that is why it wasn’t working properly. Thanks for sharing.


Leave a Reply