Open source CSS framework for data visualization.

Overview

Charts.css

GitHub Version Minified Size GitHub Repo stars License

Charts.css is an open source CSS framework for data visualization.

Visualization help end-users understand data. Charts.css help frontend developers turn data into beautiful charts and graphs using simple CSS classes.

No dependencies. 72kb file size. Less than 6kb gzipped file size!

Documentation

Check the full documentation on ChartsCSS.org.

Installation

CDN

Use jsdelivr CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

Or unpkg CDN:

<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">

Package Manager

Install using npm:

npm install charts.css

Or using yarn:

yarn add charts.css

Usage

The data is structured using semantic HTML tags and styled using CSS classes which change the visual representation displayed to the end user.

<table class="charts-css [ column ] [ show-primary-axis show-4-secondary-axes ] [ data-spacing-4 reverse-data ]">

  <caption> Front End Developer Salary </caption>

  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Income </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> 2016 </th>
      <td style="--size: calc( 40 / 100 );"> $ 40K </td>
    </tr>
    <tr>
      <th scope="row"> 2017 </th>
      <td style="--size: calc( 60 / 100 );"> $ 60K </td>
    </tr>
    <tr>
      <th scope="row"> 2018 </th>
      <td style="--size: calc( 75 / 100 );"> $ 75K </td>
    </tr>
    <tr>
      <th scope="row"> 2019 </th>
      <td style="--size: calc( 90 / 100 );"> $ 90K </td>
    </tr>
    <tr>
      <th scope="row"> 2020 </th>
      <td style="--size: calc( 100 / 100 );"> $ 100K <br> 👑 </td>
    </tr>
  </tbody>

</table>

The framework offers developers flexibility. You choose what components to display and how to style them. Each component offers several CSS classes and CSS variables to customizes your style.

The key feature is the ability to customize everything using basic CSS. Frontend developers can target any HTML element and customize it. This philosophical guideline is what makes the framework so flexible, easy and fun to use.

Questions

For questions and support please use the official forum on GitHub.

Liked Charts.css?

If you like the project, please consider to star the repo on GitHub.

License

Charts.css is licensed under the MIT license.

Comments
  • Can we add labels in both x / y axis?

    Can we add labels in both x / y axis?

    For looking at the docs, is not clear to me I can add lables in both axes, all examples use at most only one, giving the feeling this feature is missing.

    I would even recommend to having an example with "all the complementary info you can add".

    Library looking good!

    opened by tomyo 6
  • A charts.css binding for Python is available

    A charts.css binding for Python is available

    Hi @ramiy , thank you (and Lana) very much for your great work on the Charts.css! The charts look so nice, and I love the Charts.css's approach so much, that I can't help but create a binding for Charts.css for it to be used in Python. To honor the heritage, the binding is named - what else - charts.css.py, currently supporting most of the basic functionalities of charts.css, demonstrated in its doc.

    It would be nice if you can add a "language binding" section in Charts.css 's doc and link to the charts.css.py project. This way you/we can better serve a segment of audience who are familiar with Python but less fluent in css.

    opened by rayluo 4
  • Overlapping data spans in stacked column charts

    Overlapping data spans in stacked column charts

    Thanks for the framework!

    Any advice on how to deal with overlapping data spans? e.g. image

    It would be great to have them vertically stacked on top of each other to ensure readability.

    I didnt find any option for this in the docs.

    Thanks for any hints!

    opened by msmart 4
  • Show data points on secondary axes

    Show data points on secondary axes

    Hi,

    It'd be nice to allow showing data points on secondary axes, which currently give a sense of scale but don't allow estimating what data is roughly associated with a given bar/point.

    Using the example in the documentation: there are secondary axes, but what data point (or milestone) do they represent, in relation with the bars? Secondary axe could in turn show something like “10k”, “20k”, “30k” etc.

    I have a bar chart with multiple datasets in the same unit of measure, but different scales, so I'd like to be able to set data point on the secondary axes for each of them.

    Thanks!

    opened by lenormf 4
  • Stacked bar charts - would be so great

    Stacked bar charts - would be so great

    This is a great library. Data in a table is so much more usable than Google charts that we are currently using.

    Would it be easy to add stacked bar charts? I.e. each bar is the stacked "sum" of multiple components? Then we could switch.

    opened by JohnCClarke 2
  • Is v1.0 going to be released anytime soon?

    Is v1.0 going to be released anytime soon?

    Hi Rami, I notice that there was a "1.0.0" commit recently. Another recent commit even mentioned pie chart. Is release 1.0.0 and/or pie chart coming soon? :-) Can't wait to try it out.

    opened by rayluo 1
  • Add license scan report and status

    Add license scan report and status

    Your FOSSA integration was successful! Attached in this PR is a badge and license report to track scan status in your README.

    Below are docs for integrating FOSSA license checks into your CI:

    opened by fossabot 1
  • Version 1.0.0-alpha

    Version 1.0.0-alpha

    • Labels: consistent "block" alignment
    • Data: replace data hiding method
    • Labels: simpler labels alignment
    • Charts: remove donut chart (will be merged to pie)
    • Packages: update dev dependencies
    • Chart: allow using --end variables
    • Tests Pages: use --start & --end variables
    • a11y: replace display:block /w visually hidden alternative
    • a11y: hide data using visually-hidden() mixin
    • Mixins: move the circle bg to the mixin
    opened by ramiy 1
  • Replace deprecated 'color-adjust' shorthand

    Replace deprecated 'color-adjust' shorthand

    This resolves the warning from autoprefixer:

    (1:783) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

    opened by nathanchase 0
  • Enhancement idea: Can we improve things with css `attr` values?

    Enhancement idea: Can we improve things with css `attr` values?

    Looking at the samples <td style="--size: calc( 60 / 100 );"> $ 60K </td> might be more semantically valuable if we did something like

    <td data-value="60" data-total="100" style="--size: calc( attr("data-value") / attr("data-total");"> $ 60K </td> or something similar... and we could have the default style for size be implicitly that calc and do similar for --start. Also would be cool to be able to reach up for the data-total value using the cascading of CSS ;)

    opened by IDisposable 1
  • Line gets clipped in line chart when value is 100%

    Line gets clipped in line chart when value is 100%

    I noticed this in the Chart Builder - if you select Line Chart, the peak is cut off for the "100" value.

    image

    Likewise, if two side-by-side bars are both at 100, the line disappears completely.

    image

    opened by metaloha 3
  • Is there a way to make line thickness uniform for line charts?

    Is there a way to make line thickness uniform for line charts?

    I'm noticing that when there is a stark difference in height - width ratio between table rows, it results in a varied thickness of lines along the line chart. See the picture below for an example of what I mean (notice the first line is thin and tall, and the others are thicker). Curious if this is a known issue, or if there's a known way to manipulate the css to account for this. Will look into it myself if not.

    Screen Shot 2022-09-13 at 2 38 59 PM
    opened by treyholt 5
  • What are the hurdles to getting pie charts added?

    What are the hurdles to getting pie charts added?

    The Pie Charts page of the docs note that they are not in the current release, and suggest there is some challenge in getting them production-ready. However, there are no notes specifying what issues are present, and the CodePen example looks pretty good. Can you share what functionality is missing from getting this ready for the next release? I'd happily spend some time working on it if I knew what work was needed.

    question 
    opened by anied 2
  • Added transparency to column when including 'nesting' class on td

    Added transparency to column when including 'nesting' class on td

    When nesting tables within <td>, the columns continue to color themselves in behind the nested table. Added a "nesting" class intended to be applied to the parent <td> element containing the nested table to indicate that the background should not be applied as it otherwise would.

    opened by WhitWaldo 0
  • Grouped stacked columns

    Grouped stacked columns

    Adding the multiple class allows for groupings of bars or columns, but adding stacked eliminates the groupings and instead products stacked bars/columns.

    Is there an option for having groups of stacked columns?

    opened by WhitWaldo 0
Releases(0.9.0)
Owner
Open source data visualization framework using pure CSS
null
Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

obsidian-echarts Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

null 22 Nov 27, 2022
A data visualization framework combining React & D3

Semiotic is a data visualization framework combining React & D3 Interactive Documentation API Docs on the wiki Examples Installation npm i semiotic E

nteract 2.3k Nov 26, 2022
Apache Superset is a Data Visualization and Data Exploration Platform

Superset A modern, enterprise-ready business intelligence web application. Why Superset? | Supported Databases | Installation and Configuration | Rele

The Apache Software Foundation 49.3k Nov 26, 2022
DataSphereStudio is a one stop data application development& management portal, covering scenarios including data exchange, desensitization/cleansing, analysis/mining, quality measurement, visualization, and task scheduling.

English | 中文 Introduction DataSphere Studio (DSS for short) is WeDataSphere, a big data platform of WeBank, a self-developed one-stop data application

WeBankFinTech 2.4k Nov 19, 2022
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Nov 28, 2022
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 3.9k Nov 28, 2022
An All-in-one Visualization Framework for TiddlyWiki5 based on ECharts

ECharts for TiddlyWiki5 When I first started using TiddlyWiki a long time ago, I wanted TiddlyWiki to be able to visualize data. I wanted to generate

Tiddly Gittly 30 Nov 22, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.2k Nov 21, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.4k Nov 25, 2022
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.4k Nov 17, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.4k Nov 23, 2022
Data visualization library for depicting quantities as animated liquid blobs

liquidity.js A data visualization library for depicting quantities as animated liquid blobs. For a demonstration of what the final product can look li

N Halloran 91 Sep 20, 2022
Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 6k Nov 19, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Nov 22, 2022
🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

Gio.js English | 中文 React Version: react-giojs Wechat minigame: wechat usage Gio.js is an open source library for web 3D globe data visualization buil

syt123450 1.6k Nov 25, 2022
📊 Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

REAVIZ 729 Nov 17, 2022
Location Intelligence & Data Visualization tool

What is CARTO? CARTO is an open, powerful, and intuitive platform for discovering and predicting the key insights underlying the location data in our

CARTO 2.6k Nov 17, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.4k Nov 23, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Nov 22, 2022