UNPKG

3.7 kBMarkdownView Raw
1<div align="center">
2 <img width="300" src="https://chartscss.org/assets/img/logo-animation.svg" alt="Charts.css Logo">
3</div>
4
5# Charts.css
6
7![GitHub Version](https://img.shields.io/github/v/release/ChartsCSS/charts.css?style=for-the-badge) ![Minified Size](https://img.shields.io/bundlephobia/min/charts.css?style=for-the-badge) ![GitHub Repo stars](https://img.shields.io/github/stars/ChartsCSS/charts.css?label=GitHub%20Stars&style=for-the-badge) ![License](https://img.shields.io/github/license/ChartsCSS/charts.css?style=for-the-badge)
8
9**Charts.css is an open source CSS framework for data visualization.**
10
11Visualization help end-users understand data. **Charts.css** help frontend developers turn data into beautiful charts and graphs using simple **CSS classes**.
12
13No dependencies. 76kb minified size. 7kb gzipped file size!
14
15## Documentation
16
17Check the full documentation on [ChartsCSS.org](https://ChartsCSS.org/).
18
19* [Get Started](https://chartscss.org/docs/)
20* [Components](https://chartscss.org/components/)
21* [Charts](https://chartscss.org/charts/)
22* [Customization](https://chartscss.org/customization/)
23* [Development](https://chartscss.org/development/)
24* [Examples](https://chartscss.org/examples/)
25
26## Installation
27
28### CDN
29
30Use [jsdelivr](https://www.jsdelivr.com/package/npm/charts.css) CDN:
31
32```html
33<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
34```
35
36Or [unpkg](https://unpkg.com/browse/charts.css/) CDN:
37
38```html
39<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">
40```
41
42### Package Manager
43
44Install using [npm](https://www.npmjs.com/package/charts.css):
45
46```bash
47npm install charts.css
48```
49
50Or using [yarn](https://classic.yarnpkg.com/en/package/charts.css):
51
52```bash
53yarn add charts.css
54```
55
56## Usage
57
58The data is structured using semantic HTML tags and styled using CSS classes which change the visual representation displayed to the end user.
59
60```html
61<table class="charts-css [ column ] [ show-primary-axis show-4-secondary-axes ] [ data-spacing-4 reverse-data ]">
62
63 <caption> Front End Developer Salary </caption>
64
65 <thead>
66 <tr>
67 <th scope="col"> Year </th>
68 <th scope="col"> Income </th>
69 </tr>
70 </thead>
71
72 <tbody>
73 <tr>
74 <th scope="row"> 2016 </th>
75 <td style="--size: calc( 40 / 100 );"> $ 40K </td>
76 </tr>
77 <tr>
78 <th scope="row"> 2017 </th>
79 <td style="--size: calc( 60 / 100 );"> $ 60K </td>
80 </tr>
81 <tr>
82 <th scope="row"> 2018 </th>
83 <td style="--size: calc( 75 / 100 );"> $ 75K </td>
84 </tr>
85 <tr>
86 <th scope="row"> 2019 </th>
87 <td style="--size: calc( 90 / 100 );"> $ 90K </td>
88 </tr>
89 <tr>
90 <th scope="row"> 2020 </th>
91 <td style="--size: calc( 100 / 100 );"> $ 100K <br> 👑 </td>
92 </tr>
93 </tbody>
94
95</table>
96```
97
98The framework offers developers flexibility. You choose what components to display and how to style them. Each component offers several CSS classes and CSS variables to customizes your style.
99
100The key feature is the ability to customize everything using basic CSS. Frontend developers can target any HTML element and customize it. This philosophical guideline is what makes the framework so flexible, easy and fun to use.
101
102## Questions
103
104For questions and support please use the [official forum](https://github.com/ChartsCSS/charts.css/discussions) on GitHub.
105
106## Liked Charts.css?
107
108If you like the project, **please consider to star the repo on GitHub**.
109
110## License
111
112Charts.css is licensed under the [MIT license](https://opensource.org/licenses/MIT).