How to Make an Area Chart With CSS

Creating charts using only CSS might seem unusual, but it's entirely feasible. While many CSS chart examples exist, area charts (line charts with filled areas) are less common. This article demonstrates building an area chart using HTML and CSS, prioritizing semantic and accessible HTML.

HTML Structure

For simplicity, we'll use <li> elements within a <ul></ul> for data points. However, other HTML structures could be used depending on your project's needs. We'll leverage CSS custom properties to pass data to our stylesheet, assigning --start and --end properties to each <li> element.

• 40%
• 80%
• 60%
• 100%
• 30%

The text content within each <li> is optional; --start and --end are the crucial data points. However, including text improves accessibility for screen readers.

Design Considerations

Before styling, several design principles are important:

<li> Unitless Data: Use unitless numbers (0 to 1) for --start and --end in the HTML. <li> Dynamic Column Width: Avoid fixed widths for <li> elements. Column width will be calculated dynamically based on the container's width divided by the number of data points. <li> Accessibility: While --start and --end are essential, including descriptive text within each <li> enhances accessibility.

CSS Styling

Let's begin with the overall layout:

.area-chart {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  max-width: var(--chart-width, 100%); /* Customizable width */
  height: var(--chart-height, 300px); /* Customizable height */
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex-direction: row;
}

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

This sets up a flexible container. Next, style the individual columns:

.area-chart > li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background: var(--color, rgba(240, 50, 50, .75)); /* Default color */
  clip-path: polygon(
    0% calc(100% * (1 - var(--start))),
    100% calc(100% * (1 - var(--end))),
    100% 100%,
    0% 100%
  );
}

The clip-path property is key. It uses a polygon to define the visible area, dynamically adjusting based on --start and --end.

Multiple Datasets

For multiple datasets, a table offers better structure and accessibility:

40%	80%
60%	100%

The CSS for the table would adjust accordingly, using tbody and td selectors instead of ul and li, but the core clip-path logic remains the same. Remember to style the td elements with position: absolute to layer them correctly.

Conclusion

This approach creates responsive area charts using pure CSS. For more advanced features, consider exploring dedicated data visualization frameworks.

The above is the detailed content of How to Make an Area Chart With CSS. For more information, please follow other related articles on the PHP Chinese website!