Open Source CSS Chart & Graph Framework For Data Visualization | Charts.css

How to make use of 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 next CSS classes:

<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 information 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 colour 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");
}

Beautiful CSS Chart & Graph Framework, Charts.css Plugin/Github

See Demo And Download