7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Data Visualization

The Best CSS and JavaScript Chart Tutorials on Tuts+

Scroll to top

In this collection of tutorials available on Tuts+, we’re going to walk through some ways to create different types of charts. These are mostly CSS solutions but some use JavaScript.

Final product imageFinal product imageFinal product image
What You'll Be Creating

We all live in the era of information. Every day we receive tons of new data, but to gain real value from it, we need to think about how it’s presented. Data visualization is the process of making received information more human readable. We commonly do this via tables and charts.

In this collection of chart examples we won’t cover cases that describe how to build a simple chart with a JavaScript library, as this is something you can easily do on your own by reading its documentation. Instead, we’ll get our hands dirty with some custom solutions.

Check the demos at different screen sizes as the layout changes on small screens for many of them.

Data Analysis With Tables and Charts

Tables and charts are two common ways of representing and analyzing data.

Tables display data in rows and columns. A row can have many columns. A table can also include additional features like search, sorting, and pagination that make data analysis easier.

Charts display data graphically in varied forms. For better visualization, they can include helper features like tooltips and captions. Some of the well-known chart types are:

  • Bar Charts
  • Column Charts
  • Line Charts
  • Organizational Charts
  • Pie Charts
  • Bubble Charts
  • Doughnut (or Donut) Charts

It’s worth noting that the existence of one doesn’t negate the existence of the other. We can perfectly display data in both ways at the same time and make them synchronize. We’ll see this in action during the penultimate tutorial.

Enough talk! Let’s have a look at all the custom chart tutorials that are available on Tuts+!

1. Pure CSS Vertical Organizational Chart

Organizational charts represent the relationships between entities in a tree structure format. For example, we can use them to describe a company’s or a study program’s structure.

In this exercise, we’re building a CSS-only four-level deep vertical organizational chart.

2. Pure CSS Horizontal Organizational Chart

Building on top of the previous chart, we keep exploring the organizational charts. This time we’re building a horizontal organizational chart that turns into a vertical one on mobile screens.

3. JavaScript-Based Gantt Chart

Gantt charts look like bar charts. They are primarily used as a project management tool for planning and distributing tasks across team members. All popular project management platforms make use of them in their dashboards.

In this tutorial, we’re creating a JavaScript-driven Gantt chart.

4. Pure CSS Gantt Chart

Would you like to learn how to build a Gantt chart in pure CSS? If so, be sure to follow Ian Yates, Web Design editor here at Tuts+, as he covers a flexible approach for developing such a chart with CSS Grid.

5. Pure CSS Thermometer Chart

Thermometer charts look like stacked column charts. They aim to show the percentage of completion (progress) of a specific goal.

In this tutorial, we’re implementing a CSS-only animated thermometer chart that visualizes the funding of a charitable organization over the years.

6. Pure CSS Column Chart

Column (or vertical) charts use vertical columns to present and compare data. If there are multiple columns, it’s recommended to use them on large screens so users can see all the columns.

In this demonstration, we’re building a CSS-only responsive column chart as part of a one-page portfolio that showcases our web skills. Click Skills to see it in action.

7. Pure CSS Advanced Bar Chart

Bar charts use horizontal columns to present and compare data. They are ideal for small screens as users can scroll vertically to see the data.

Similar to the previous exercise, we’re creating such a chart in pure CSS as part of another one-pager. To make things more interesting, we use a little JavaScript to animate the chart bars as the chart becomes visible on the screen.

8. Pure CSS Semi-Circle Donut Chart

Donut charts are another type of chart. They are similar to pie charts, but they have a round hole in the center that makes them look like a donut. Semi-circle donut charts are half of the donut charts.

In this exercise, we’re creating a CSS-only animated semi-circle chart where we list our web skills. Each skill is associated with a percentage. The higher the percentage, the bigger the presence of the skill in the chart.

9. Highcharts.js and DataTables.js

This is another exercise where we’re visualizing some data in tabular and graphical formats using two popular JavaScript libraries.

The nice thing here is that we synchronize the table and chart so that they both listen to user changes.

10. How to Create a Sortable HTML Table with JavaScript

In this final example, Jemima creates another sortable table for us (if you’re a Pokemon fan you’ll especially love this one). It doesn’t rely on any libraries, but uses vanilla JavaScript to display data from a mock JSON response into a HTML table.

Conclusion

That concludes another roundup, folks! Hopefully, this list has given you enough inspiration to see the capabilities of CSS and start making your own charts. Enjoy the demos, read the associated tutorials, and last but not least, be sure to follow Envato Tuts+ on CodePen for more creative pens!

As always, thanks a lot for reading!

More Tutorial Collections on Tuts+

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.