Charts.css.py Online Document

Introduction

As implied by its name, charts.css.py brings charts.css to Python.

Charts.css is a pure-CSS data visualization framework, which allows your HTML table to be rendered as a chart inside browser. It offers advantages over traditional JS-heavy chart libraries.

charts.css.py provides a pythonic API to convert your 2-dimension lists into html table, so that you can largely avoid working directly at HTML and CSS level. The output of charts.css.py is not an image, but an HTML snippet for you to insert into your html page, which will be rendered by charts.css.

Bar chart with single dataset

Let's start this document with a simple sample. Our first sample shows the basic usage pattern, visualizing single dataset with default effect. You still need to organize your single dataset as a 2-dimension list. 



Loading......




Installation

If you are working on a normal Python project, you can install by pip:

pip install charts.css.py

If your project is powered by Brython, you can choose to use our JS package.
(The version number below might not be up-to-date. Please get latest version from
Release page.)

<script src="https://github.com/rayluo/charts.css.py/releases/download/0.2.0/charts.css.py-brython.js"></script>




Configuration

First of all, insert this snippet into your html page,
typically inside the <head>...</head> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
<style>
.charts-css {  /* You have to use this class name */
  height: 400px;  /* Most charts need some height to operate */
  width: 80%;  /* Optional */
  margin: 0 auto;  /* Optional */
}
.charts-css.legend.legend-inline {  /* You have to use this class name */
  height: 3em;  /* Optional */
}
</style>




Data Format

All chart functions in charts.css.py have a unified data format as a 2-dimension list,
optionally with headers in the first column and/or first row. They look like this:

data = [
    ["Continent", "1st year", "2nd year", "3rd year", "4th year", "5th year"],
    ["Asia", 20.0, 30.0, 40.0, 50.0, 75.0],
    ["Euro", 40.0, 60.0, 75.0, 90.0, 100.0],
    ]


Even when you are working with one-dimension data,
you would still need to format them as 2-dimension list, which contains one column:

data = [
    [20.0],
    [40.0],
    ]


Some charts can also work with one row:

data = [
    [20.0, 30.0, 40.0, 50.0, 75.0],
    ]




Bar chart with single dataset and headers



Same raw data as the previous sample, now with headers.
The headers in first column are visible in chart, but headers in first row are not.




This sample also demonstrates lots of optional effects.
Unless stated otherwise, all the chart functions
(bar(), column(), line() and area())
support same parameters.






Loading......




Column chart with multiple datasets

Multiple datasets mean there are multiple columns from your 2-dimension list input.




Loading......




Column chart, stacked by face value

bar() and column() support a boolean parameter stacked.
Simply enable that, you will get a stacked bar chart (or column chart).




Loading......




Column chart, stacked by percentage

A percentage=True can switch stacked column or bar chart to percentage view.




Loading......




Line chart

Line charts display raw data connected with a straight line.
The input is still a 2-dimension list.
Note that each vertical "column" - rather than the horizontal "row" - is rendered as a horizontal line.




Loading......




Area

Area charts work similar to line charts, plus they display raw data with colors between axis and line.




Loading......