Author: | ChartsCSS |
---|---|
Views Total: | 66 views |
Official Page: | Go to website |
Last Update: | October 19, 2023 |
License: | MIT |
Preview:

Description:
Charts.css is a CSS data visualization framework that turns regular HTML tables into beautiful and customizable charts.
Chart Types:
- Bar
- Column
- Area
- Line
- Pie
How to use it:
1. Install and import the Charts.css framework.
# Yarn $ yarn add charts.css # NPM $ npm i charts.css
<link rel="stylesheet" href="/path/to/dist/charts.min.css" />
2. Add the charts-css
to your HTML table and specify the chart type as follows:
<div id="my-chart"> <ul class="charts-css legend"> </ul> <table class="charts-css bar|column|area|line show-heading"> <caption> Table Heading </caption> ... Your Tabular Data Here </table> </div>
3. Customize the chart with the following CSS classes:
- multiple: multiple data sts
- show-heading: shows heading
- reverse: reverses orientation
- reverse-data: reverses data
- reverse-datasets: reverses data sets
- show-labels: shows labels
- hide-data: hides data
- show-data-on-hover: shows data on hover
- show-primary-axis: shows primary axis
- show-data-axes: shows data axes
- stacked: stacked chart
- data-spacing-x: space between data
<table class="charts-css bar multiple stacked data-spacing-5 show-heading hide-data show-data-on-hover reverse-data reverse-datasets reverse show-labels show-primary-axis show-data-axes"> ... </table>
4. Display your data in a tooltip on hover.
<td> <span class="data"> 10 </span> <span class="tooltip"> Data: 10 <br> More info... </span> </td>
5. Customize the background color of the chart.
#my-chart { --color: blue; } #my-chart { --color-1: red; --color-2: green; --color-3: black; ... }
// or customize the size & color for each data <td style="--size: 0.5; --color: blue;"> Data </td>
// use an image as background #my-chart { --color: url("bg.jpg"); }
Changelog:
10/19/2023
- v1.1.0