Press "Enter" to skip to content

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

Charts.css is an open-source data visualization CSS framework that turns regular HTML tables into beautiful, customizable charts.

Visualization helps end-users understand the data. Charts CSS Diagrams help front-end developers convert data into beautiful charts and graphs using simple CSS classes.

Presenting A Bar Chart Using HTML, CSS, and Javascript | simpleBar.js

How to make use of it:

1. Install and import the Charts.css framework.

# Yarn
$ yarn add charts.css

$ 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">
  <table class="charts-css bar|column|area|line show-heading">
    <caption> Table Heading </caption>
    ... Your Tabular Data Here

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">

4. Display your information in a tooltip on hover.

  <span class="data"> 10 </span>
  <span class="tooltip"> Data: 10 <br> More info... </span>

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

Official Website(ChartsCSS): Click Here

This superior jQuery/javascript plugin is developed by ChartsCSS. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.