# @cdc/chart
> React component for visualizing tabular data in various types of charts
Latest version **4.26.7** (published 2026-07-28) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @cdc/chart
pnpm add @cdc/chart
yarn add @cdc/chart
bun add @cdc/chart
```
## Health
**Score 60/100 (C)** — status: active.
Positive: esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types; large bundle.
## Facts
| | |
|---|---|
| Version | 4.26.7 |
| Published | 2026-07-28 |
| First published | 2021-01-21 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 37 |
| Unpacked size | 14.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | Matthew Pallansch |
| Maintainers | cooms13, adoe, mpallansch |
## Links
- npm: https://www.npmjs.com/package/@cdc/chart
- Repository: https://github.com/CDCgov/cdc-open-viz
- Homepage: https://github.com/CDCgov/cdc-open-viz#readme
- Issues: https://github.com/CDCgov/cdc-open-viz/issues
- npm.io page: https://npm.io/package/@cdc/chart
## Dependencies (37)
- [sass](https://npm.io/package/sass.md) ^1.89.2
- [vite](https://npm.io/package/vite.md) ^7.3.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.23
- [d3-array](https://npm.io/package/d3-array.md) ^3.2.4
- [@cdc/core](https://npm.io/package/@cdc/core.md) ^4.26.7
- [chroma-js](https://npm.io/package/chroma-js.md) ^3.1.2
- [d3-sankey](https://npm.io/package/d3-sankey.md) ^0.12.3
- [dompurify](https://npm.io/package/dompurify.md) ^3.4.0
- [@visx/axis](https://npm.io/package/@visx/axis.md) ^3.12.0
- [@visx/text](https://npm.io/package/@visx/text.md) ^3.12.0
- [@visx/brush](https://npm.io/package/@visx/brush.md) ^3.12.0
- [@visx/curve](https://npm.io/package/@visx/curve.md) ^3.12.0
- [@visx/event](https://npm.io/package/@visx/event.md) ^3.12.0
- [@visx/glyph](https://npm.io/package/@visx/glyph.md) ^3.12.0
- [@visx/scale](https://npm.io/package/@visx/scale.md) ^3.12.0
- [@visx/shape](https://npm.io/package/@visx/shape.md) ^3.12.0
- [@visx/stats](https://npm.io/package/@visx/stats.md) ^3.12.0
- [react-icons](https://npm.io/package/react-icons.md) ^5.5.0
- [@visx/legend](https://npm.io/package/@visx/legend.md) ^3.12.0
- [@visx/marker](https://npm.io/package/@visx/marker.md) ^3.12.0
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.6.20
- [@visx/heatmap](https://npm.io/package/@visx/heatmap.md) ^3.12.0
- [@visx/pattern](https://npm.io/package/@visx/pattern.md) ^3.12.0
- [@visx/tooltip](https://npm.io/package/@visx/tooltip.md) ^3.12.0
- [react-tooltip](https://npm.io/package/react-tooltip.md) 5.8.2-beta.3
- [d3-time-format](https://npm.io/package/d3-time-format.md) ^4.1.0
- [@visx/annotation](https://npm.io/package/@visx/annotation.md) ^3.12.0
- [@visx/responsive](https://npm.io/package/@visx/responsive.md) ^3.12.0
- [vite-plugin-svgr](https://npm.io/package/vite-plugin-svgr.md) ^4.2.0
- [@hello-pangea/dnd](https://npm.io/package/@hello-pangea/dnd.md) ^16.2.0
- [@react-spring/web](https://npm.io/package/@react-spring/web.md) ^9.7.5
- [html-react-parser](https://npm.io/package/html-react-parser.md) ^5.2.3
- [@rollup/plugin-dsv](https://npm.io/package/@rollup/plugin-dsv.md) ^3.0.2
- [@vitejs/plugin-react](https://npm.io/package/@vitejs/plugin-react.md) ^5.1.2
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1
- [react-accessible-accordion](https://npm.io/package/react-accessible-accordion.md) ^5.0.1
- [vite-plugin-css-injected-by-js](https://npm.io/package/vite-plugin-css-injected-by-js.md) ^2.4.0
## Recent versions
- 4.26.7 (latest) — 2026-07-28
- 4.26.6 — 2026-06-30
- 4.26.5 — 2026-06-04
- 4.26.4 — 2026-04-28
- 4.26.3 — 2026-04-06
- 4.26.2 — 2026-03-02
- 4.26.1 — 2026-01-28
- 4.25.11 — 2025-12-02
- 4.25.10 — 2025-10-28
- 4.25.8 — 2025-08-27
- 4.25.7 — 2025-07-29
- 4.25.6-2 — 2025-07-10
- 4.25.6-1 — 2025-07-09
- 4.25.6 — 2025-07-01
- 4.25.5-1 — 2025-06-05
- … 41 more at https://npm.io/package/@cdc/chart/versions
## README
# @cdc/chart
[](https://www.npmjs.com/package/@cdc/chart)
`` is the CDC charting component for rendering bar, line, pie, combo, radar, Sankey, forest plot, and other chart families from a saved config.
## Installation
```bash
npm install @cdc/chart
```
## Quick Start
Use the package by passing a `config` object directly:
```jsx
import CdcChart from '@cdc/chart'
const config = {
type: 'chart',
version: '4.26.4',
visualizationType: 'Bar',
title: 'Minimal Chart',
data: [
{ category: 'A', value: 1 },
{ category: 'B', value: 2 }
],
xAxis: {
dataKey: 'category'
},
series: [{ dataKey: 'value' }]
}
function App() {
return (
)
}
export default App
```
You can also load configuration from a URL with ``.
## Configuration
The primary reference for authoring configs is [CONFIG.md](./CONFIG.md).
If you are reading this in a context where relative Markdown links do not open correctly, use the [GitHub copy of the chart config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/chart/CONFIG.md).
## Properties
| Property | Type | Description |
| --- | --- | --- |
| `config` | `object` | Configuration object for the chart. This is the primary integration path for React consumers. |
| `configUrl` | `string` | Optional URL to a JSON config file. Use this when you want the component to fetch its config at runtime. |
---
_Source: https://npm.io/package/@cdc/chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._