Press "Enter" to skip to content

A Small Library for Pie & Ring (Donut) Chart JavaScript Library |

Charty is a simple library for drawing pie and donut charts that helps to draw pie and donut charts using plain JavaScript and CSS. No SVG and Canvas is required.

To use it, just link the library to <script src="charty.js"> and between the  <header> tag, link the CSS file  <link rel="stylesheet" rel="charty.css" (you can specify your own CSS).

donut chart html css javascript, animated pie chart js, pure css donut chart, react minimal pie chart, css donut chart, doughnut chart html code

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 inserted, must be a valid CSS selector

How to make use of it:

1. Add the Charty JavaScript and Stylesheet to the web page.

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

2. Generate a hoop chart from the info you present:

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

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

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

4. All default parameters:

new Charty({
  title = 'New Chart', 
  chartType = 'circle', 
  data = [{Test: 5}], 
  precision = false, 
  selector = 'body'
});

5. Add more information to the chart.

chart.addData({
  "Name", Value
});

Minimal Pie & Ring (Donut) Chart, Charty, a small library for charts Plugin/Github, pure javascript donut chart, svg donut chart


See Demo And Download

Official Website(Max131): Click Here

This superior jQuery/javascript plugin is developed by Max131. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.