Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asciimoo/cssplot
Pure CSS charts
https://github.com/asciimoo/cssplot
Last synced: 22 days ago
JSON representation
Pure CSS charts
- Host: GitHub
- URL: https://github.com/asciimoo/cssplot
- Owner: asciimoo
- License: other
- Created: 2014-10-19T19:16:56.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2014-11-18T17:18:27.000Z (over 9 years ago)
- Last Synced: 2024-04-14T06:15:25.465Z (2 months ago)
- Language: CSS
- Homepage: https://asciimoo.github.io/cssplot
- Size: 505 KB
- Stars: 782
- Watchers: 31
- Forks: 45
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - asciimoo/cssplot - Pure CSS charts (CSS)
- awesome-css-only - Cssplot - Pure CSS charts. (Uncategorized / Uncategorized)
README
cssplot
=======
Simple, css-only plotting.
## Features
* No javascript required
* Easy-to-use
* Responsive
Check [asciimoo.github.io/cssplot](https://asciimoo.github.io/cssplot) for demo.
## Usage
```html
```
Alternatively `cssplot.base.css` can be used alone with the following modifications:
* Bar chart: use `class="chart-column" style="height: 99.0%"` instead of `data-cp-size="99"`
* Vertical bar chart: use `class="chart-row" style="width: 99.0%"` instead of `data-cp-size="99"`
* Scatter plot: use `class="chart-dot" style="left: 20.0%; bottom: 10.0%"` instead of `data-cp-x="20" data-cp-y="10"`
## Examples
### Column chart
```html
- 99%
- 50%
- 30%
- 90%
- 10%
- 70%
- 30%
- 90%
```
### Stacked Column chart
```html
-
99%
-
50%
20%
-
30%
15%
-
90%
10%
-
10%
60%
-
70%
25%
-
30%
40%
-
90%
```
### Bar chart
```html
```
### Stacked Bar chart
```html
```
### Scatter plot
```html
- a
- b
- c
- d
- e
- f
- h
- i
```
## Conceptions
- [ ] Pie chart
- [ ] Line chart
- [ ] Axis/scale support
- [ ] Live demo
- [ ] Better build script