https://github.com/thysultan/csscharts.js

jquery plugin to create donut and bar charts with css
https://github.com/thysultan/csscharts.js

Last synced: 4 months ago
JSON representation

jquery plugin to create donut and bar charts with css

• Host: GitHub
• URL: https://github.com/thysultan/csscharts.js
• Owner: thysultan
• Created: 2015-03-28T08:58:27.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2016-06-01T07:37:24.000Z (about 10 years ago)
• Last Synced: 2025-04-10T07:10:51.895Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://thysultan.com/projects/cssCharts/
• Size: 76.2 KB
• Stars: 45
• Watchers: 10
• Forks: 11
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# cssCharts.js

jquery plugin to create simple donut, bar or line charts with dom nodes. style with css.

[http://thysultan.com/projects/cssCharts/](http://thysultan.com/projects/cssCharts/)

___

###Install with bower

```

bower install csscharts

```

### Include:

```html

```

### run:

```javascript

$('.bar-chart').cssCharts({type:"bar"});

$('.donut-chart').cssCharts({type:"donut"});

$('.line-chart').cssCharts({type:"line"}); 

```

### example donut/pie chart

optional: to trigger countUp counter for the donut chart as seen on the preview page.

```javascript

$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');

```

add "pie-chart" class to .donut-chart if you want to convert it to a pie chart, i.e

```html



```


- - -

### example line chart

```html



$('.line-chart').cssCharts({type:"line"});

```


* insure x cordinates are 0 - ascending.  

* insure y cordinates are 0 or greater.  

- - -

### example bar chart

```html



$('.bar-chart').cssCharts({type:"bar"});

```


- - - 

style to your hearts content, see index.html for an example implementation.