preface

When it comes to data visualization frameworks, there are Echarts, AntV, D3, and so on. However, these data visualization frameworks all have one thing in common 😶, that is, they cannot be used without JavaScript.

On the contrary, chart.css is a data visualization framework implemented with pure CSS. Its core is to display the table label as bar Charts, line Charts, pie Charts and so on.

Chars.css is very simple to use and supports the following two ways of use:

  • For use in native web projectslinkThe label is introduced into the chart.css file, which can beCDNOr on GitHubReleasedDownload the code locally
  • Used in projects with package management, that is, throughnpm i charts.css 或 yarn add charts.cssAdd to the project

So, let’s take a look at how to use chart.css to implement bar Charts 😎 ~

Use charts.css to implement bar Charts

In general, our bar chart needs to be relatively simple, just need to show the data size, data name. Using chart.css, we do this:

<table class="charts-css column show-labels data-spacing-5">
  <tbody>
    <tr>
      <th>Jan</th>
      <td style="--size: calc( 40 / 100 )"> 
        40 
        <span class="tooltip"> 
          Charts.css is so 
          <br> easy for me. 
        </span>
      </td>
    </tr>
    <tr>
      <th>Feb</th>
      <td style="--size: calc( 60 / 100 )"> 
        60
      </td>
    </tr>
    <tr>
      <th>Mar</th>
      <td style="--size: calc( 75 / 100 )"> 
        75 
      </td>
    </tr>
    <tr>
      <th>Mar</th>
      <td style="--size: calc( 35 / 100 )"> 
        35 
      </td>
    </tr>
  </tbody>
</table>
Copy the code

Accordingly, render to the page looks like this:

As you can see, we have implemented a simple bar chart without writing a line of JavaScript code 😚.

Let’s take a look at what the above HTML code does:

.charts-css

At the beginning of the article, Charts. CSS was introduced to represent the table tag as various Charts.

So, add the.charts-CSS class selector to the table TAB to turn a regular table of data into a chart:

<table class="charts-css"></table>
Copy the code

Column Indicates the type of the chart

After converting a normal data table to a chart, you had to select the type of chart to use. The chart types that have been Released are bar, Column, Area, and Line.

In the above example, the declared chart is.column, which is a vertical column:

<table class="charts-css column">
</table>
Copy the code

. Show-lables Displays labels

The th tag in each TR tag will act as the label for the current piece of data, which in the above example is the horizontal axis of the bar chart.

By default, however, it is not displayed. So, we need to add the.show-lables selector to the table tag to display it:

<table class="charts-css column show-labels">
</table>
Copy the code

Data-spacing -5 Data spacing

By default, charts.css represents a bar chart in which each bar is pressed close to the other.

You can add a.data-spacing selector to the table to keep spacing between each column for a more elegant look, with the last value representing how much spacing you need:

<table class="charts-css column show-labels data-spacing-5">
</table>
Copy the code

–size Data size

In the diagram, the size of each piece of data displayed on the page is determined by the –size attribute, as in the example above, which refers to the height of each column.

In chart.css, a pair of TR labels represent a single piece of data. Accordingly, the –size attribute also needs to be applied to the style of the TD tag in the TR tag.

For example, if the length of the data display is 60% of the baseline, you can write:

<td style="--size: calc( 60 / 100 )"> 
  60 
</td>
Copy the code

.tooltip displays additional information

If, just show the data as a chart, sometimes may not meet our needs.

In the above example, we added a hover to the first column to show the effect of extra information (charts.css is so easy for me.).

This effect is achieved by adding the SPAN tag to the TD tag and adding the.tooltip selector to the SPAN tag:

<tr>
  <th>Jan</th>
  <td style="--size: calc( 40 / 100 )"> 
    40 
    <span class="tooltip"> 
      Charts.css is so 
      <br> easy for me. 
    </span>
  </td>
</tr>
Copy the code

conclusion

Although chart.CSS currently supports only three Charts, four more are in development. However, there is no denying that charts.css is no mental burden to use.

Charter.css has been improved, and I think charter.css is also a good choice for simple charting scenarios!

Thumb up 👍

If you get something from this post, please give me a “like”. This will be my motivation to keep sharing. Thank you

My name is Wu Liu. I like innovation and source Code manipulation, and I focus on source Code (Vue 3, Vite), front-end engineering, cross-end and other technology learning and sharing. Welcome to follow my wechat official account: Code Center.