Beautiful CSS Chart & Graph Framework – Charts.css

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