Line,  bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG<\/a> or a JavaScript chart library like Chart.js<\/a> or a complex tool like D3<\/a> to create those charts, but what if you don’t want to load yet another library into your already performance-challenged website?<\/p>\n\n\n\n

There are plenty of articles out there for creating CSS-only bar charts<\/a>, column charts, and pie charts<\/a>, but if you just want a basic line chart, you’re out of luck. While CSS can \u201cdraw lines\u201d with borders and the like, there is no clear method for drawing a line from one point to another on an X and Y coordinate plane. <\/p>\n\n\n\n

Well, there is a way!<\/strong> If all you need is a simple line chart, there’s no need to load in a huge JavaScript library or even reach for SVG. You can make everything you need with just CSS and a couple of custom properties in your HTML. Word of warning, though. It does involve a bit of trigonometry<\/a>. If that didn’t scare you off, then roll up your shirt sleeves, and let’s get started!<\/p>\n\n\n\n\n\n\n\n

Here\u2019s a peek at where we\u2019re headed:<\/p>\n\n\n\n