# chartscss/charts.css

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/chartscss-charts-css).**

6,569 stars · 181 forks · HTML · MIT

## Links

- GitHub: https://github.com/ChartsCSS/charts.css
- Homepage: https://ChartsCSS.org
- awesome-repositories: https://awesome-repositories.com/repository/chartscss-charts-css.md

## Topics

`chart` `charts` `css` `css-framework` `data-visualization` `html` `scss` `ui-components` `visualization`

## Description

charts.css is a CSS-driven framework designed to transform semantic HTML into accessible data visualizations without relying on JavaScript. It functions as a charting library that uses standard HTML structures, such as tables and lists, to render graphs while maintaining full compatibility with screen readers.

The project distinguishes itself by using CSS variables to map numeric data to visual dimensions and utility classes to control chart types and layouts. It supports a wide range of visual styles, including 3D effects, reflection effects, and customized color palettes integrated via a brand design system.

The framework covers a broad set of visualization capabilities, including the rendering of bar, line, area, pie, radar, and stacked charts, as well as mixed-type hybrid visualizations. It provides comprehensive tools for layout and structure, such as axis generation, legend implementation, and responsive adjustments via container queries. Interactivity is handled through CSS-driven animations, hover effects, and tooltips.

## Tags

### User Interface & Experience

- [Semantic HTML Rendering](https://awesome-repositories.com/f/user-interface-experience/semantic-html-rendering.md) — Transforms semantic HTML structures like tables and lists into visual charts to ensure full screen reader compatibility.
- [Accessible Charting Components](https://awesome-repositories.com/f/user-interface-experience/accessible-charting-components.md) — Renders accessible data visualizations by transforming semantic HTML tables into charts that remain perceivable to screen readers. ([source](https://cdn.jsdelivr.net/gh/chartscss/charts.css@main/README.md))
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Maps design tokens to native CSS variables for dynamic control of aspect ratios and legend styles. ([source](https://chartscss.org/docs/migrate-to-v1/))
- [Data-to-Visual Mappings](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/data-to-visual-mappings.md) — Maps numeric data values directly to visual dimensions by assigning them as CSS variables within HTML elements.
- [Circular Visualizations](https://awesome-repositories.com/f/user-interface-experience/dashboard-widgets/circular-visualizations.md) — Converts data tables into circular visualizations such as pie and doughnut charts using CSS utility classes. ([source](https://chartscss.org/docs/migrate-to-v1/))
- [Data-to-Visual Mappings](https://awesome-repositories.com/f/user-interface-experience/data-to-visual-mappings.md) — Maps numeric data values to visual dimensions like size and position using CSS variables. ([source](https://chartscss.org/components/data/))
- [Charting Libraries](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/charting-libraries.md) — Provides a library for rendering graphical data representations using CSS and HTML tables.
- [Line Charts](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/specific-chart-types/line-charts.md) — Provides a method to represent data trends as connected line charts using semantic HTML and CSS. ([source](https://chartscss.org/charts/line/))
- [Data Visualizations](https://awesome-repositories.com/f/user-interface-experience/high-volume-data-rendering/data-visualizations.md) — Renders multiple data series within one chart to compare different groups of information. ([source](https://chartscss.org/charts/column/))
- [Chart HTML Structuring](https://awesome-repositories.com/f/user-interface-experience/html-based-ui-structures/chart-html-structuring.md) — Defines the semantic HTML structure necessary to transform raw data into visual graphs. ([source](https://chartscss.org/components/wrapper/))
- [Axis Annotations](https://awesome-repositories.com/f/user-interface-experience/axis-annotations.md) — Adds primary labels to separate categories and overlays secondary axes for reference. ([source](https://chartscss.org/charts/line/))
- [Axis Configurations](https://awesome-repositories.com/f/user-interface-experience/axis-configurations.md) — Generates data axes to separate labels from data and provide reference lines. ([source](https://chartscss.org/charts/area/))
- [3D Perspective Transforms](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/3d-perspective-transforms.md) — Uses CSS transforms and shadows to create 3D perspective and depth effects on charts. ([source](https://chartscss.org/customization/3d-effects/))
- [Chart Axis Generators](https://awesome-repositories.com/f/user-interface-experience/chart-axis-generators.md) — Includes utilities for generating readable tick marks and labels on primary and secondary axes. ([source](https://chartscss.org/charts/bar/))
- [Chart Axis Rendering](https://awesome-repositories.com/f/user-interface-experience/chart-axis-rendering.md) — Renders scaled coordinate systems and guide axes within the chart area. ([source](https://chartscss.org/components/axes/))
- [Chart Legends](https://awesome-repositories.com/f/user-interface-experience/chart-components/chart-legends.md) — Implements chart legends with configurable vertical or horizontal orientations to identify different data series. ([source](https://chartscss.org/components/legend/))
- [CSS Component Libraries](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries.md) — Offers a collection of pre-styled CSS components and variables for configuring chart axes, legends, and tooltips.
- [CSS Utility Classes](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes.md) — Controls chart types and layout configurations through the application of pre-defined CSS utility classes.
- [Data Point Tooltips](https://awesome-repositories.com/f/user-interface-experience/data-point-tooltips.md) — Displays supplementary information in popup boxes when users hover over specific data points. ([source](https://chartscss.org/components/tooltips/))
- [Data Point Labels](https://awesome-repositories.com/f/user-interface-experience/data-point-tooltips/data-point-labels.md) — Displays and manages the size and position of text labels anchored to specific data points. ([source](https://chartscss.org/charts/area/))
- [Stacked Charts](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/specific-chart-types/stacked-charts.md) — Visualizes how groups are divided into smaller parts using totals or percentages. ([source](https://chartscss.org/components/stacked/))
- [Axis Labeling](https://awesome-repositories.com/f/user-interface-experience/element-groupings/alignment-spacing/axis-label-alignment/axis-labeling.md) — Allows assigning descriptive text to primary axes using semantic HTML heading tags. ([source](https://chartscss.org/components/labels/))
- [Visualization Layout Configurations](https://awesome-repositories.com/f/user-interface-experience/interface-layout-customization/visualization-layout-configurations.md) — Provides configurations for adjusting the visual dimensions, positioning, and orientation of generated graphs. ([source](https://chartscss.org/development/supported-features/))
- [Chart Layout Frameworks](https://awesome-repositories.com/f/user-interface-experience/layout-components/chart-layout-frameworks.md) — Provides a structural framework for organizing the spacing and positioning of quantitative data elements. ([source](https://chartscss.org/charts/column/))
- [Container Queries](https://awesome-repositories.com/f/user-interface-experience/layout-containers/container-queries.md) — Implements responsive chart scaling and layout adjustments based on the size of the parent container using CSS container queries.
- [Responsive Chart Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-adapters/responsive-chart-layouts.md) — Implements chart-specific layout logic that adapts dimensions and positioning to different screen sizes. ([source](https://chartscss.org/components/wrapper/))
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Uses a CSS grid system to precisely align chart axes, legends, and data series.
- [Styling Utilities](https://awesome-repositories.com/f/user-interface-experience/styling-utilities.md) — Ships a collection of CSS utility classes to manage the presentation of axes and tooltips. ([source](https://chartscss.org/docs/usage/))
- [Color Palettes](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palettes.md) — Uses a system of CSS variables to initialize and assign custom color palettes, gradients, and patterns. ([source](https://chartscss.org/components/colors/))
- [UI Brand Integration](https://awesome-repositories.com/f/user-interface-experience/ui-brand-integration.md) — Integrates official brand identities into visualizations using CSS variables. ([source](https://chartscss.org/customization/basic-styling/))
- [Chart Presentation Enhancements](https://awesome-repositories.com/f/user-interface-experience/visual-presentation-enhancements/chart-presentation-enhancements.md) — Enables the addition of structural elements like axes, headings, and custom spacing to improve chart presentation. ([source](https://chartscss.org/components/))
- [Chart Visual Style Customizations](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization/chart-visual-style-customizations.md) — Provides thematic and aesthetic modifications of chart elements via standard CSS classes. ([source](https://cdn.jsdelivr.net/gh/chartscss/charts.css@main/README.md))

### Web Development

- [Data Visualization Frameworks](https://awesome-repositories.com/f/web-development/css-frameworks/data-visualization-frameworks.md) — Functions as a CSS-driven framework for rendering data visualizations using semantic HTML without JavaScript.
- [CSS Animation Patterns](https://awesome-repositories.com/f/web-development/css-animation-patterns.md) — Provides interaction and highlighting effects for data points using pure CSS transitions and keyframe animations.

### Data & Databases

- [Bar Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts.md) — Renders raw data as horizontal bar charts using HTML tables and CSS variables. ([source](https://chartscss.org/charts/bar/))
- [Pie Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/pie-charts.md) — Renders proportional data as radial slices using CSS variables and semantic HTML. ([source](https://chartscss.org/charts/pie/))
- [Column Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts/json-data-chart-renderers/general-chart-renderers/column-charts.md) — Provides a CSS-driven way to render raw data as vertical columns using semantic HTML. ([source](https://chartscss.org/charts/column/))
- [Radar Chart Renderers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/radar-chart-renderers.md) — Renders multivariate data on a radial axis using semantic HTML and CSS. ([source](https://chartscss.org/charts/radar/))
- [Accessible Visualization Tools](https://awesome-repositories.com/f/data-databases/data-visualization-tools/accessible-visualization-tools.md) — Ensures data visualizations remain accessible to screen readers by utilizing semantic HTML structures.
- [Chart Annotations](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization/custom-data-line-visualization/chart-annotations.md) — Adds headings and labels to specific data points using semantic markers to provide visual context. ([source](https://chartscss.org/charts/column/))
- [Multi-Series Overlays](https://awesome-repositories.com/f/data-databases/data-visualization-charts/time-series-visualizers/multi-series-overlays.md) — Renders several independent datasets on the same axes with distinct styles to visualize trends. ([source](https://chartscss.org/charts/bar/))

### Graphics & Multimedia

- [Area Charts](https://awesome-repositories.com/f/graphics-multimedia/chart-geometry-renderers/area-charts.md) — Renders data as area charts with colored fills between the axis and the line. ([source](https://chartscss.org/charts/area/))
- [Multi-Chart Type Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/composite-visualizations/mixed-chart-types/multi-chart-type-libraries.md) — Renders a broad range of chart types including bar, line, and pie charts using a unified CSS framework. ([source](https://chartscss.org/examples/))
- [Mixed Chart Types](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/composite-visualizations/mixed-chart-types.md) — Supports combining multiple chart types on a single axis to visualize different data dimensions. ([source](https://chartscss.org/charts/mixed/))

### Part of an Awesome List

- [Graphics and Visualization](https://awesome-repositories.com/f/awesome-lists/media/graphics-and-visualization.md) — CSS framework for data visualization using standard HTML.