Skip to main content
CSS-Tricks
Since 2007
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Newsletter
  • Search

Articles Tagged
data visualization

15 Articles
{
,

}
A circular pit chart pin three slices differentiated by different colors. Sparkle emoji surrounds the chart.
Direct link to the article Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!
charts data visualization

Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!

We dive again into CSS Pie Charts! This time, Author Antoine Villepreux delivers semantic and flexible charts without a single line of JS.
Antoine Villepreux on Jun 4, 2026
A circular pit chart pin three slices differentiated by different colors. Sparkle emoji surrounds the chart.
Direct link to the article Trying to Make the Perfect Pie Chart in CSS
charts data visualization

Trying to Make the Perfect Pie Chart in CSS

Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.
Juan Diego Rodríguez on Feb 9, 2026
Horizontal bar chart illustration. Bars are pill-shaped with white text labels indicating percentage. Dark gray background.
Direct link to the article CSS Bar Charts Using Modern Functions
charts data visualization

CSS Bar Charts Using Modern Functions

CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?
Preethi on Feb 5, 2026
Direct link to the article How to Make an Area Chart With CSS
charts clip-path data visualization flexbox

How to Make an Area Chart With CSS

You might know a few ways to create charts with pure CSS. Some of them are covered here on CSS-Tricks, and many others can be found on CodePen, but I haven’t seen many examples of “area charts” (imagine …

Rami Yushuvaev on Dec 2, 2020
Direct link to the article Creating a Gauge in React
data visualization graph react SVG

Creating a Gauge in React

You should really look at everything Amelia does, but I get extra excited about her interactive blog posts. Her latest about creating a gauge with SVG in React is unreal. Just the stuff about understanding viewBox is amazing and that’s …

Chris Coyier on May 3, 2020
Direct link to the article Making an Audio Waveform Visualizer with Vanilla JavaScript
canvas data visualization web audio api

Making an Audio Waveform Visualizer with Vanilla JavaScript

As a UI designer, I’m constantly reminded of the value of knowing how to code. I pride myself on thinking of the developers on my team while designing user interfaces. But sometimes, I step on a technical landmine.

A few …

Matthew Ström on Nov 12, 2019
Direct link to the article Making a Chart? Try Using Mobx State Tree to Power the Data
charts data visualization

Making a Chart? Try Using Mobx State Tree to Power the Data

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and Chartist, to name only a few of many, many options.

But …

Ted Littledale on Nov 5, 2019
Direct link to the article Creating Interactive Maps in WordPress with MapSVG
data visualization WordPress wordpress plugins

Creating Interactive Maps in WordPress with MapSVG

The MapSVG plugin for WordPress allows you to create feature-rich, interactive maps quickly and through a smart admin UI. Interactive maps are a common request for projects when you need to visualize impact over particular locations. If you are …

Lentie Ward on May 29, 2019
Direct link to the article The Many Ways of Getting Data Into Charts
api charts data visualization

The Many Ways of Getting Data Into Charts

Data is available everywhere nowadays, whether it’s in a plain text file, a REST API, an online Google sheet… you name it! It’s that variety of context that makes building graphs more than simply having a database in your local …

Dan Englishby on May 1, 2019
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Get Curated Front-End Roundups Right in Your Inbox

Coming back really, really soon! See past issues →

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top