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 |
|
11 | Visualization help end-users understand data. **Charts.css** help frontend developers turn data into beautiful charts and graphs using simple **CSS classes**.
|
12 |
|
13 | No dependencies. 76kb minified size. 7kb gzipped file size!
|
14 |
|
15 | ## Documentation
|
16 |
|
17 | Check 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 |
|
30 | Use [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 |
|
36 | Or [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 |
|
44 | Install using [npm](https://www.npmjs.com/package/charts.css):
|
45 |
|
46 | ```bash
|
47 | npm install charts.css
|
48 | ```
|
49 |
|
50 | Or using [yarn](https://classic.yarnpkg.com/en/package/charts.css):
|
51 |
|
52 | ```bash
|
53 | yarn add charts.css
|
54 | ```
|
55 |
|
56 | ## Usage
|
57 |
|
58 | The 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 |
|
98 | The 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 |
|
100 | The 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 |
|
104 | For questions and support please use the [official forum](https://github.com/ChartsCSS/charts.css/discussions) on GitHub.
|
105 |
|
106 | ## Liked Charts.css?
|
107 |
|
108 | If you like the project, **please consider to star the repo on GitHub**.
|
109 |
|
110 | ## License
|
111 |
|
112 | Charts.css is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|