# react-chartist

> A small, typed React component for Chartist.js

Latest version **1.0.0** (published 2026-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-chartist
pnpm add react-chartist
yarn add react-chartist
bun add react-chartist
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2026-07-11 |
| First published | 2014-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.18 |
| Dependencies | 0 |
| Unpacked size | 39.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 523 |
| Author | Fraser Xu |
| Maintainers | fraserxu |
| Keywords | react, react-component, chartist, charts, svg |

## Links

- npm: https://www.npmjs.com/package/react-chartist
- Repository: https://github.com/fraserxu/react-chartist
- Homepage: https://github.com/fraserxu/react-chartist#readme
- Issues: https://github.com/fraserxu/react-chartist/issues
- npm.io page: https://npm.io/package/react-chartist

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2026-07-11
- 1.0.0-rc.1 (next) — 2026-07-11
- 0.14.4 — 2021-02-02
- 0.14.3 — 2020-02-16
- 0.14.2 — 2019-12-05
- 0.14.1 — 2019-12-05
- 0.14.0 — 2019-12-05
- 0.13.3 — 2019-01-30
- 0.13.2 — 2019-01-28
- 0.13.1 — 2018-01-17
- 0.13.0 — 2017-04-25
- 0.12.0 — 2017-01-30
- 0.11.0 — 2016-11-15
- 0.10.2 — 2016-04-12
- 0.10.1 — 2015-10-29
- … 15 more at https://npm.io/package/react-chartist/versions

## README

# react-chartist

[![npm](https://img.shields.io/npm/v/react-chartist.svg)](https://www.npmjs.com/package/react-chartist)
[![CI](https://github.com/fraserxu/react-chartist/actions/workflows/ci.yml/badge.svg)](https://github.com/fraserxu/react-chartist/actions/workflows/ci.yml)
[![license](https://img.shields.io/npm/l/react-chartist.svg)](LICENSE)

A small, typed React component for [Chartist.js](https://chartist.dev/).

Version 1 is a modern reboot for Chartist 1.x and React 18/19. It keeps the familiar
`<ChartistGraph>` API while replacing the legacy Babel build and old Chartist constructors.

## Install

```sh
npm install react-chartist chartist
```

Import Chartist's stylesheet once in your application:

```ts
import "chartist/dist/index.css";
```

## Usage

```tsx
import { useMemo } from "react";
import ChartistGraph from "react-chartist";
import "chartist/dist/index.css";

export function WeeklySalesChart() {
  const data = useMemo(
    () => ({
      labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
      series: [[5, 9, 7, 8, 5]],
    }),
    [],
  );

  const options = useMemo(
    () => ({
      fullWidth: true,
      low: 0,
      showArea: true,
    }),
    [],
  );

  return (
    <ChartistGraph
      aria-label="Weekly sales"
      className="ct-major-twelfth"
      data={data}
      options={options}
      type="Line"
    />
  );
}
```

`data`, `options`, `responsiveOptions`, and `listener` are compared by reference. Memoize values
that do not need to change so Chartist does not perform unnecessary work.

## Props

The props are a discriminated TypeScript union, so `data`, `options`, and event payloads are typed
for the selected chart type.

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `type` | `"Line" \| "Bar" \| "Pie"` | Yes | Selects the Chartist constructor. |
| `data` | Chartist data for `type` | Yes | Labels and series rendered by Chartist. |
| `options` | Chartist options for `type` | No | Updates the existing chart when its reference changes. |
| `responsiveOptions` | `[mediaQuery, options][]` | No | Recreates the chart when its reference changes. |
| `listener` | Typed event-handler map | No | Adds and removes Chartist event listeners. |
| `className` | `string` | No | Appended to the built-in `ct-chart` class. |

All other `<div>` attributes, including `aria-*`, `id`, `role`, and `style`, are forwarded to the
chart container.

### Responsive options

```tsx
const responsiveOptions = [
  ["screen and (max-width: 640px)", { showPoint: false }],
];

<ChartistGraph
  data={{ labels: ["A", "B"], series: [[3, 7]] }}
  responsiveOptions={responsiveOptions}
  type="Line"
/>;
```

Chartist only accepts responsive options when constructing a chart, so changing this prop safely
detaches and recreates the instance.

### Events

```tsx
<ChartistGraph
  data={{ series: [20, 30, 50] }}
  listener={{
    created: ({ svg }) => console.log(svg),
    draw: (event) => console.log(event.type),
  }}
  type="Pie"
/>;
```

### Accessing the Chartist instance

```tsx
import { useRef } from "react";
import ChartistGraph, { type ChartistGraphHandle } from "react-chartist";

const chartRef = useRef<ChartistGraphHandle>(null);

<ChartistGraph data={{ series: [[1, 2, 3]] }} ref={chartRef} type="Bar" />;

chartRef.current?.chart?.update();
```

The handle exposes `chart`, the current Chartist instance, and `element`, the owned container div.

## Accessibility

Charts are visual summaries, not accessible replacements for their source data. Add an accessible
name with `aria-label` or `aria-labelledby`, and provide the same information in text or a table
when users need to inspect exact values.

## Migrating from 0.x

Version 1 contains intentional breaking changes:

- Chartist `^1.5.0` replaces the old `^0.10.1` API.
- React `^18.2.0` and `^19.0.0` are supported; older React versions are not.
- Types now come directly from Chartist and are selected by the `type` prop.
- `responsiveOptions` uses the documented camel-case name and recreates the chart when changed.
- Event listeners now update when the `listener` prop changes.
- Children are no longer cloned into the Chartist-owned container.
- The imperative ref is `{ chart, element }` rather than the old class component instance.
- CommonJS users should use `const { ChartistGraph } = require("react-chartist")`.

## Development

Node 20.19 or newer is required for the development toolchain.

```sh
npm install
npm run check
```

See [CONTRIBUTING.md](CONTRIBUTING.md) for the project workflow.

## License

MIT © Fraser Xu

---
_Source: https://npm.io/package/react-chartist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._