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.
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.
10 CSS and JavaScript Chart Tutorials
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+
About Author
