CSS Bar Charts Using Modern Functions

The CSS-Tricks website has published an article on creating bar charts using modern CSS features, showcasing how new functions like sibling-index() and an upgraded attr() can simplify the process. According to the article, these features enable the creation of a “pretty darn nice bar chart in vanilla CSS” with reduced code and improved readability.

Why This Matters

The use of modern CSS features can significantly improve the efficiency and readability of code, making it easier to create complex designs like bar charts. However, the lack of support for these features in some browsers, such as Firefox, can limit their adoption. The article highlights the potential of these features, citing examples of how they can be used to create different types of charts, including horizontal bar charts and charts with markers.

Key Insights

The sibling-index() function allows for automatic establishment of grid columns, eliminating the need for manual placement of list items.
The attr() function can be used to retrieve values from data attributes, enabling the creation of dynamic charts.
The use of grid-template-rows and grid-row properties enables the creation of responsive and flexible charts.

Working Example

.chart {
  display: grid;
  grid-template-rows: repeat(100, 1fr);
}

.chart-bar {
  grid-column: sibling-index();
  grid-row: span attr(data-value number);
}

Practical Applications

Use Case: A company like Stripe or Coinbase can use CSS-only bar charts to display data visualization on their website, providing a responsive and interactive experience for users.
Pitfall: One common anti-pattern is the lack of accessibility features, such as horizontal labels, which can make it difficult for users to understand the chart. Adding these features can improve the overall user experience.

References:

On This Page

CSS Bar Charts Using Modern Functions