How To Fill Chart Background Using Css

You might know a few means to create charts with pure CSS. Some of them are covered hither on CSS-Tricks, and many others can exist found on CodePen, but I haven't seen many examples of "area charts" (imagine a line chart with the bottom area filled in), particularly any in HTML and CSS alone. In this article, we'll do just that, using a semantic and attainable HTML foundation.

A red area chart against a dark gray background.

Let'southward start with the HTML

To simplify things, we volition be using <ul> tags every bit wrappers and <li> elements for individual data items. Y'all can utilize any other HTML tag in your project, depending on your needs.

          <ul form="surface area-chart">   <li> twoscore% </li>   <li> eighty% </li>   <li> 60% </li>   <li> 100% </li>   <li> xxx% </li> </ul>

CSS can't retrieve the inner HTML text, that is why we will be using CSS custom properties to pass information to our CSS. Each data item will have a --beginning and an --finish custom properties.

          <ul class="expanse-nautical chart">   <li style="--offset: 0.1; --cease: 0.4;"> 40% </li>   <li mode="--start: 0.4; --end: 0.8;"> 80% </li>   <li mode="--start: 0.eight; --end: 0.6;"> lx% </li>   <li style="--starting time: 0.half-dozen; --finish: ane.0;"> 100% </li>   <li style="--start: 1.0; --stop: 0.3;"> 30% </li> </ul>

Hither's what we need to consider…

At that place are several design principles we ought to consider before moving into styling:

Units data: Nosotros will be using unit of measurement-less information in our HTML (i.e. no px, em , rem , % or any other unit). The --start and --end custom properties will be numbers between 0 and 1.
Columns width: We won't set a fixed width for each <li> element. Nosotros won't be using % either, as nosotros don't know how many items are at that place. Each column width will be based on the principal wrapper width, divided by the total number of data items. In our case, that'south the width of the <ul> element divided past the number of <li> elements.
Accessibility: The values inside each <li> is optional and just the --start and --cease custom backdrop are required. Still, it'south best to include some sort of text or value for screen readers and other assistive technologies to describe the content.

Now, let's start styling!

Let's start with full general layout styling first. The nautical chart wrapper chemical element is a flex container, displaying items in a row, stretching each child element then the entire area is filled.

          .area-chart {   /* Reset */   margin: 0;   padding: 0;   edge: 0;    /* Dimensions */   width: 100%;   max-width: var(--chart-width, 100%);   superlative: var(--chart-height, 300px);    /* Layout */   brandish: flex;   justify-content: stretch;   align-items: stretch;   flex-management: row; }

If the surface area nautical chart wrapper is a list, we should remove the list mode to give united states of america more styling flexibility.

          ul.area-chart, ol.area-nautical chart {   list-style: none; }

This lawmaking styles all of the columns in the entire chart. With bar charts it's unproblematic: nosotros use background-color and height for each column. With area char ts we are going to use the clip-path holding to set the region that should exist shown.

Kickoff we ready each column:

          .area-nautical chart > * {   /* Even size items */   flex-abound: 1;   flex-shrink: 1;   flex-basis: 0;    /* Color */   background: var(--color, rgba(240, 50, fifty, .75)); }

To create a rectangle roofing the unabridged area, nosotros will achieve for the clip-path belongings and utilize its polygon() office containing the coordinates of the surface area. This basically doesn't do anything at the moment considering the polygon covers everything:

          .area-chart > * {   clip-path: polygon(     0% 0%,     /* top left */     100% 0%,   /* top right */     100% 100%, /* bottom right */     0% 100%    /* lesser left */   ); }

Now for the best function!

To show just part of the column, we clip it to create that area chart-like effect. To show just the expanse we desire, nosotros use the --start and --terminate custom properties inside the clip-path polygon:

          .area-chart > * {   prune-path: polygon(     0% calc(100% * (ane - var(--start))),     100% calc(100% * (1 - var(--end))),     100% 100%,     0% 100%   ); }

Seriously, this one bit of CSS does all of the work. Hither's what nosotros get:

Working with multiple datasets

Now that we know the nuts, let'southward create an area chart with multiple datasets. Area charts often measure more than than one set of information and the upshot is a layered comparison of the data.

This kind of chart requires several child elements, then we are going to replace our <ul> approach with a <table>.

          <table form="surface area-chart">   <tbody>     <tr>       <td> 40% </td>       <td> 80% </td>     </tr>     <tr>       <td> 60% </td>       <td> 100% </td>     </tr>   </tbody> </table>

Tables are accessible and search engine friendly. And if the stylesheet doesn't load for some reason, all the data is notwithstanding visible in the markup.

Once more, nosotros will utilise the --kickoff and --stop custom properties with numbers between 0 and 1.

          <table course="area-chart">   <tbody>     <tr>       <td style="--commencement: 0; --end: 0.4;"> 40% </td>       <td mode="--start: 0; --end: 0.8;"> 80% </td>     </tr>     <tr>       <td style="--start: 0.4; --end: 0.half dozen;"> 60% </td>       <td mode="--outset: 0.viii; --end: ane.0;"> 100% </td>     </tr>   </tbody> </table>

So, commencement nosotros will way the full general layout for the wrapping element, our tabular array, which we've given an .area-chart class:

          .area-chart {   /* Reset */   margin: 0;   padding: 0;   border: 0;    /* Dimensions */   width: 100%;   max-width: var(--chart-width, 600px);   height: var(--chart-height, 300px); }

Next, nosotros will make the <tbody> element a flex container, displaying the <tr> items in a row and evenly sized:

          .surface area-nautical chart tbody {   width: 100%;   meridian: var(--nautical chart-height, 300px);    /* Layout */   display: flex;   justify-content: stretch;   align-items: stretch;   flex-management: row; } .area-chart tr {   /* Even size items */   flex-abound: 1;   flex-shrink: i;   flex-basis: 0; }

Now nosotros need to make the <td> elements cover each other, ane element on acme of each other then nosotros get that layered effect. Each <td> covers the entire surface area of the <tr> element that contains information technology.

          .surface area-chart tr {   position: relative; } .area-nautical chart td {   position: absolute;   height: 0;   right: 0;   bottom: 0;   left: 0; }

Allow's put the magical powers of clip-path: polygon() to use! We're merely displaying the surface area betwixt the --showtime and --end custom properties which, again, are values between 0 and 1:

          .area-chart td {   prune-path: polygon(     0% calc(100% * (1 - var(--start))),     100% calc(100% * (1 - var(--stop))),     100% 100%,     0% 100%   ); }

Now let's add color to each one:

          .area-chart td {   background: var(--color); } .area-nautical chart td:nth-of-blazon(ane) {   --color: rgba(240, 50, l, 0.75); } .area-nautical chart td:nth-of-type(2) {   --color: rgba(255, 180, 50, 0.75); } .expanse-chart td:nth-of-blazon(3) {   --color: rgba(255, 220, 90, 0.75); }

It's important to utilise colors with opacity to become a nicer effect, which is why we're using rgba() values. You could utilize hsla() here instead, if that's how you scroll.

And, simply like that:

Wrapping upwardly

Information technology doesn't matter how many HTML elements nosotros add together to our chart, the flex-based layout makes certain all the items are equally sized. This way, we only need to fix the width of the wrapping chart element and the items will adapt appropriately for a responsive layout.

We have covered one technique to create surface area charts using pure CSS. For advanced utilise cases, y'all can check out my new open source data visualization framework, ChartsCSS.org. Run into the Area Nautical chart section to see how surface area charts can be customized with things like different orientations, axes, and even a reversed social club without changing the HTML markup, and much more!