Css style

Charts.CSS, a library of pure CSS graphics

Charts.css is a new data visualization library that relies only on CSS and HTML. Avoiding the use of JavaScript / Canvas avoids many accessibility issues in existing solutions while keeping the assembly size under 10KB when minified and compressed.

While there is no shortage of JavaScript data visualization libraries that offer an impressive set of features, they are often quite large, offer partial accessibility support, and, of course, rely on JavaScript.

The alternative of drawing graphics using only CSS and HTML has been under discussion for a number of years, with several interesting examples dating back to 2015. While impressive, these examples did not meet most of the real requirements. a graphics library, offering a lower development and user experience than those provided by JavaScript libraries.

Charts.css attempts to address these issues while providing a consistent, easy-to-use structure that makes it easy for developers to integrate it into their website.

A basic Charts.css chart contains three HTML elements: a wrapper, a list containing the legend, and a table that contains the data. The table class includes the which defines which graphic will be drawn. Currently, Charts.css supports four main types: bar, column, area, and row. Additional types such as pie, donut, and others are in development.

Adding data is a bit tricky because the data visualization is not tied to the values ​​in the table. For example, the following columns in the table are displayed at the same height despite having different values.


To solve this problem, we need to set the relative value in each column by modifying the CSS variable –size. For example, if we use 0K-100K as the range, the cell $ 40K can be defined like this:


Note that the $ 40,000 is not required to draw the chart and can be masked by wrapping it with a scope that includes a .data class like this:


To control the visualization of charts, Charts.css provides a set of CSS classes that control different aspects of the chart such as spacing (.data-spacing-), orientation (.reverse), axes (.show-primary-axis, .show--secondary-axes), etc. Additionally, direct access to many CSS properties is possible, allowing developers to add a range of additional features such as animations.

Charts.css is open source software available under the MIT license.