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