Making Charts With CSS

Why Build Charts With Pure CSS?

Data visualization is a cornerstone of modern web development. When you need to display metrics, statistics, or comparative data, charts help users quickly grasp complex information. While JavaScript charting libraries have dominated this space for years, modern CSS now offers powerful capabilities for creating responsive, accessible, and performant charts directly in your stylesheet.

This guide explores how to leverage contemporary CSS features to build bar charts, area charts, line charts, and pie charts without relying on external libraries. By mastering these techniques, you'll deliver faster, more maintainable experiences that align with modern web development best practices.

Key Advantages of CSS-Only Charts

• Zero JavaScript dependencies means faster page loads and better performance
• CSS-only solutions work without client-side JavaScript execution
• Global customization through CSS custom properties (variables)
• Fully responsive by default when built with modern CSS techniques
• Reduced bundle size improves Core Web Vitals metrics like Largest Contentful Paint
• Consistent styling across all charts through centralized CSS rules

Creating Accessible Bar Charts

Bar charts represent data as rectangular bars with lengths proportional to their values. Building them with pure CSS requires semantic HTML structure and modern CSS calculations.

Semantic HTML Structure

Using <table> elements for charts provides inherent accessibility benefits. Screen readers can navigate and interpret tabular data, while the semantic structure communicates relationships between data points. Each row represents a data category, and table cells store values that CSS can read and style.

<table class="bar-chart">
 <caption>Quarterly Revenue</caption>
 <tbody>
 <tr>
 <th scope="row">Q1</th>
 <td data-value="45000">$45,000</td>
 </tr>
 <tr>
 <th scope="row">Q2</th>
 <td data-value="62000">$62,000</td>
 </tr>
 <!-- Additional rows -->
 </tbody>
</table>

Calculating Bar Heights

With the typed attr() function and CSS calc(), you can calculate bar heights based on data values stored in HTML attributes. This approach eliminates hardcoded heights and ensures charts automatically scale when data changes.

.bar-chart td {
 --value: attr(data-value type(<number>), 0);
 --max-value: 100000;
 --height: calc((var(--value) / var(--max-value)) * 100%);

 height: var(--height);
 background: linear-gradient(to top, var(--chart-color), var(--chart-light-color));
}

Building Area and Line Charts

Area and line charts visualize trends over time or across categories. CSS clip-path with polygon shapes creates these visualizations without SVG paths or Canvas rendering.

Understanding clip-path Polygons

The clip-path: polygon() function defines visible regions by specifying coordinate pairs. Each coordinate corresponds to a data point's position, creating custom shapes that match your dataset exactly.

.area-chart-shape {
 clip-path: polygon(
 0% 100%,
 0% calc(100% - var(--point-1)),
 25% calc(100% - var(--point-2)),
 50% calc(100% - var(--point-3)),
 75% calc(100% - var(--point-4)),
 100% calc(100% - var(--point-5)),
 100% 100%
 );
}

Connecting Data Points

Line charts show only the connecting path between data points. This requires creating thin polygon shapes or combining clip-path with separate line elements. The technique defines zero-width shapes along the data path.

Animated Transitions

CSS transitions provide smooth animations when chart data changes. Apply transition properties to height, width, or clip-path values for natural animations without JavaScript libraries.

.area-chart-shape {
 transition: clip-path 0.5s ease-out, height 0.5s ease-out;
}

Implementing Pie Charts with conic-gradient

Pie charts represent data as circular segments proportional to their values. The conic-gradient() CSS function creates these visualizations by sweeping colors around a center point.

Basic Pie Chart Structure

Each color stop represents a data segment, with angles determining the proportion of each slice. The gradient starts at 12 o'clock and sweeps clockwise around the center.

.pie-chart {
 background: conic-gradient(
 var(--color-1) 0deg 90deg,
 var(--color-2) 90deg 180deg,
 var(--color-3) 180deg 270deg,
 var(--color-4) 270deg 360deg
 );
 border-radius: 50%;
}

Calculating Segment Angles

Convert numeric values to degrees by multiplying by 360 and dividing by the total. These calculated angles become gradient stop positions for accurate representations.

.pie-chart {
 --total: calc(var(--value-1) + var(--value-2) + var(--value-3) + var(--value-4));
 --angle-1: calc(var(--value-1) / var(--total) * 360deg);
 --angle-2: calc(var(--value-2) / var(--total) * 360deg);

 background: conic-gradient(
 var(--color-1) 0deg var(--angle-1),
 var(--color-2) var(--angle-1) calc(var(--angle-1) + var(--angle-2)),
 /* Additional segments */
 );
}

Responsive Chart Design

Modern charts must adapt to various screen sizes and container dimensions. CSS provides powerful tools for responsive data visualization.

Container Queries

CSS Container Queries (CQ) enable charts to respond to their container's dimensions rather than the viewport. This is essential for reusable chart components that adapt to different layout contexts.

@container (min-width: 400px) {
 .chart-container {
 font-size: 1rem;
 }
}

@container (max-width: 399px) {
 .chart-container {
 font-size: 0.875rem;
 }
}

Mobile-First Approach

Start with mobile-optimized charts that work well on small screens, then enhance for larger displays. Bar charts might display vertically on mobile but transition to horizontal orientation on wider screens.

Handling Long Labels

Long labels and data values require thoughtful CSS treatment. Text truncation, ellipsis, and controlled wrapping prevent layout breakage while maintaining readability.

Performance Optimization

CSS-only charts can achieve excellent performance by following optimization best practices. When you reduce JavaScript dependencies and leverage native CSS features, you create faster experiences that users expect from modern AI-powered web applications.

Minimizing Repaints and Reflows

Use transform for animations instead of changing height or width properties. GPU-accelerated properties like opacity and transform provide smoother animations on lower-powered devices.

.chart-bar {
 transform: scaleY(var(--scale-factor));
 transform-origin: bottom;
 transition: transform 0.3s ease-out;
}

Efficient CSS Calculations

Simplify calc() expressions and avoid overly nested selectors. Batch style changes and use efficient selectors to maintain smooth chart rendering.

Key Performance Tips

• Use transform and opacity for animations (GPU accelerated)
• Avoid changing layout properties in transitions
• Simplify selector matching with class-based targeting
• Consider content-visibility: auto for off-screen charts
• Minimize complex calculations in rendering paths

Accessibility Best Practices

Accessible charts ensure all users can understand your data visualizations.

Semantic Markup

Use <table> for data structures, <caption> for titles, and proper heading structures. ARIA labels and descriptions supplement visual information for non-visual users.

Color Contrast

Chart colors must meet WCAG contrast requirements: 4.5:1 for normal text and 3:1 for large text. Consider patterns alongside colors for users with color vision deficiencies. Accessible data visualization not only serves all users better but also strengthens your overall SEO performance by ensuring content is usable across all audiences.

Data Fallbacks

Provide underlying data tables as fallbacks. Screen readers benefit from navigable tables, while users with color vision deficiencies can reference exact numerical values.

Accessible Implementation Checklist

• Use semantic table markup with proper scope attributes
• Include <caption> elements describing chart purpose
• Ensure 4.5:1 contrast ratio for text elements
• Provide alternative text descriptions for complex charts
• Include data tables as fallback content
• Test with screen readers and color blindness simulators

Conclusion

CSS has evolved into a powerful tool for data visualization. From basic bar charts using table markup and typed attr() to sophisticated pie charts with conic-gradient and animated area charts with clip-path, modern CSS provides the building blocks for accessible, performant, and responsive charts.

By understanding these techniques, you can reduce JavaScript dependencies, improve page performance, and create maintainable data visualizations that adapt to any design system. Start with simple charts and progressively add complexity as you master each technique--your users (and Core Web Vitals scores) will thank you.

Sources

1. DEV Community - Charts in CSS - Modern approach using CSS Grid, typed attr(), and advanced CSS features
2. Slider Revolution - CSS Charts Resource - Practical examples of bar, pie, and line charts without JavaScript
3. Designmodo - CSS Graph Tutorials - Best practices, chart types, and accessibility considerations