Beautiful CSS Chart & Graph Framework – Charts.css

Category: Chart & Graph , CSS & CSS3 , Recommended | March 22, 2021
Author: ChartsCSS
Views Total: 234 views
Official Page: Go to website
Last Update: March 22, 2021
License: MIT

Preview:

Beautiful CSS Chart & Graph Framework – Charts.css

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

You Might Be Interested In:


Leave a Reply