Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ChartsCSS/charts.css
Open source CSS framework for data visualization.
https://github.com/ChartsCSS/charts.css
chart charts css css-framework data-visualization html scss ui-components visualization
Last synced: 15 days ago
JSON representation
Open source CSS framework for data visualization.
- Host: GitHub
- URL: https://github.com/ChartsCSS/charts.css
- Owner: ChartsCSS
- License: mit
- Created: 2020-09-26T12:27:00.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T01:59:48.000Z (6 months ago)
- Last Synced: 2024-10-15T23:44:28.319Z (24 days ago)
- Topics: chart, charts, css, css-framework, data-visualization, html, scss, ui-components, visualization
- Language: HTML
- Homepage: https://ChartsCSS.org
- Size: 3.95 MB
- Stars: 6,212
- Watchers: 75
- Forks: 175
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - ChartsCSS/charts.css - Open source CSS framework for data visualization. (HTML)
- my-awesome-list - charts.css
- awesome-starred-test - ChartsCSS/charts.css - Open source CSS framework for data visualization. (HTML)
- Awesome-CSS-Resources - Charts.css:
- jimsghstars - ChartsCSS/charts.css - Open source CSS framework for data visualization. (HTML)
- awesome - ChartsCSS/charts.css - Open source CSS framework for data visualization. (HTML)
- awesome - ChartsCSS/charts.css - Open source CSS framework for data visualization. (HTML)
README
# Charts.css
    
**Charts.css is an open source CSS framework for data visualization.**
Visualization help end-users understand data. **Charts.css** help frontend developers turn data into beautiful charts and graphs using simple **CSS classes**.
No dependencies. 76kb minified size. 7kb gzipped file size!
## Documentation
Check the full documentation on [ChartsCSS.org](https://ChartsCSS.org/).
* [Get Started](https://chartscss.org/docs/)
* [Components](https://chartscss.org/components/)
* [Charts](https://chartscss.org/charts/)
* [Customization](https://chartscss.org/customization/)
* [Development](https://chartscss.org/development/)
* [Examples](https://chartscss.org/examples/)
## Installation
### CDN
Use [jsdelivr](https://www.jsdelivr.com/package/npm/charts.css) CDN:
```html
```
Or [unpkg](https://unpkg.com/browse/charts.css/) CDN:
```html
```
### Package Manager
Install using [npm](https://www.npmjs.com/package/charts.css):
```bash
npm install charts.css
```
Or using [yarn](https://classic.yarnpkg.com/en/package/charts.css):
```bash
yarn add charts.css
```
## Usage
The data is structured using semantic HTML tags and styled using CSS classes which change the visual representation displayed to the end user.
```html
Front End Developer Salary
Year
Income
2016
$ 40K
2017
$ 60K
2018
$ 75K
2019
$ 90K
2020
$ 100K
👑
```
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.
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.
## Questions
For questions and support please use the [official forum](https://github.com/ChartsCSS/charts.css/discussions) on GitHub.
## Liked Charts.css?
If you like the project, **please consider to star the repo on GitHub**.
## License
Charts.css is licensed under the [MIT license](https://opensource.org/licenses/MIT).