# tanstack/react-charts

**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/tanstack-react-charts).**

3,149 stars · 253 forks · HTML · MIT · archived

## Links

- GitHub: https://github.com/TanStack/react-charts
- Homepage: https://react-charts.tanstack.com
- awesome-repositories: https://awesome-repositories.com/repository/tanstack-react-charts.md

## Topics

`chart` `component` `d3` `react` `react-motion`

## Description

This library provides a set of tools for building dynamic data visualizations within React applications. It functions as a declarative framework that allows developers to define complex graphical representations through configuration settings rather than manual manipulation of the document object model.

The library specializes in rendering interactive Cartesian charts, including line, bar, bubble, and area plots. It distinguishes itself by utilizing a coordinate-system-based mapping approach that translates raw data into pixel positions, combined with a component-based architecture that enables the layering of multiple independent axes and data series within a single visualization.

The system includes built-in support for responsive design, automatically tracking parent container dimensions to adjust layouts across different screen sizes. It also provides hooks for managing user interactions such as hover states and click events, while using a provider pattern to share configuration and theme data across nested chart elements.

## Tags

### User Interface & Experience

- [Data Visualization Components](https://awesome-repositories.com/f/user-interface-experience/data-visualization-components.md) — Provides a comprehensive set of tools for building dynamic, responsive line, bar, bubble, and area plots.
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Integrates highly customizable and reusable charting components into the React ecosystem.
- [React Charting Libraries](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/react-charting-libraries.md) — Offers a specialized library for rendering interactive and responsive Cartesian data visualizations in React.
- [Chart Customization Components](https://awesome-repositories.com/f/user-interface-experience/chart-customization-components.md) — Provides utilities for modifying the visual appearance and behavior of individual chart elements. ([source](https://react-charts.tanstack.com/))
- [Declarative UI Libraries](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-libraries.md) — Defines complex graphical representations through declarative configuration settings rather than manual DOM manipulation.
- [Interaction Hooks](https://awesome-repositories.com/f/user-interface-experience/interaction-hooks.md) — Encapsulates mouse tracking, hover states, and click events within reusable hooks for synchronized data interaction.
- [Interactive Data Renderers](https://awesome-repositories.com/f/user-interface-experience/interactive-data-renderers.md) — Provides interactive chart components that respond to user input for dynamic data exploration. ([source](https://github.com/tanstack/react-charts#readme))
- [DOM Measurement APIs](https://awesome-repositories.com/f/user-interface-experience/layout-containers/text-wrapping-controls/container-width-optimizers/dom-measurement-apis.md) — Tracks parent container dimensions using DOM measurement APIs to trigger automatic layout updates.
- [Responsive Layout Adapters](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-adapters.md) — Automatically adjusts chart dimensions and scaling to fit varying container sizes. ([source](https://github.com/tanstack/react-charts#readme))
- [Responsive Dashboards](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/responsive-dashboards.md) — Supports the design of data-driven interfaces that adapt layout and scaling across different devices.

### Data & Databases

- [Interactive Data Visualizations](https://awesome-repositories.com/f/data-databases/data-import-and-export/interactive-data-visualizations.md) — Enables the creation of dynamic and responsive charts for visual data exploration in web applications.
- [Multiple Axes Configurations](https://awesome-repositories.com/f/data-databases/chart-axes/multiple-axes-configurations.md) — Supports rendering multiple independent axes on a single chart for comparing different data scales. ([source](https://github.com/tanstack/react-charts#readme))
- [Multi-Axis Coordinate Systems](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/statistical-plotting-libraries/plot-axis-customizers/multi-axis-coordinate-systems.md) — Facilitates complex data analysis by layering multiple series and independent axes within a single visualization.
- [Line Chart Renderers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/time-series-chart-renderers/line-chart-renderers.md) — Renders standard Cartesian plots including line, bar, bubble, and area charts. ([source](https://react-charts.tanstack.com/))

### Graphics & Multimedia

- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Renders high-fidelity geometric shapes and data paths using scalable vector graphics.
- [Scale-Based Coordinate Mappings](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/scale-based-coordinate-mappings.md) — Translates raw data into pixel coordinates using configurable mathematical scaling functions.

### Software Engineering & Architecture

- [Context State Propagators](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-patterns/context-state-propagators.md) — Shares global chart configuration and theme data across nested components using the provider pattern.

### Web Development

- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Constructs complex visualizations by nesting specialized sub-components for axes, series, and interactive elements.