# chartjs-plugin-chart2music

> Chart.js plugin for Chart2Music. Turns chart.js charts into music so the blind can hear data.

Latest version **0.7.0** (published 2026-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install chartjs-plugin-chart2music
pnpm add chartjs-plugin-chart2music
yarn add chartjs-plugin-chart2music
bun add chartjs-plugin-chart2music
```

## Health

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

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2026-07-14 |
| First published | 2023-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 84.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Maintainers | julianna-langston |
| Keywords | a11y, accessibility, chart.js, chart, dataviz, screen reader, sonification |

## Links

- npm: https://www.npmjs.com/package/chartjs-plugin-chart2music
- Repository: https://github.com/julianna-langston/chartjs2music
- Homepage: https://github.com/julianna-langston/chartjs2music#readme
- Issues: https://github.com/julianna-langston/chartjs2music/issues
- npm.io page: https://npm.io/package/chartjs-plugin-chart2music

## Dependencies (2)

- [chart.js](https://npm.io/package/chart.js.md) 4.5.1
- [chart2music](https://npm.io/package/chart2music.md) 1.20.0

## Recent versions

- 0.7.0 (latest) — 2026-07-14
- 0.6.1 — 2025-04-14
- 0.6.0 — 2024-10-03
- 0.5.1 — 2024-05-08
- 0.4.1 — 2024-05-08
- 0.5.0 — 2024-04-04
- 0.4.0 — 2024-02-28
- 0.3.0 — 2024-02-03
- 0.2.0 — 2024-02-02
- 0.1.5 — 2023-10-31
- 0.1.4 — 2023-10-24
- 0.1.3 — 2023-10-04
- 0.1.2 — 2023-09-30
- 0.1.1 — 2023-04-08
- 0.1.0 — 2023-04-08
- … 7 more at https://npm.io/package/chartjs-plugin-chart2music/versions

## README

# chartjs-plugin-chart2music

[![npm version](https://badge.fury.io/js/chartjs-plugin-chart2music.svg)](https://www.npmjs.com/package/chartjs-plugin-chart2music)

`chartjs-plugin-chart2music` connects [Chart.js](https://www.chartjs.org/) charts to [Chart2Music](https://chart2music.com/), providing keyboard navigation, screen-reader output, and interactive data sonification. Focus a chart to explore its data with the keyboard; the active data point is also highlighted on the visual chart.

This plugin is in beta. The supported chart types and integration points are listed below.

## Install and use

```bash
npm install chart.js chartjs-plugin-chart2music
```

Register the plugin globally:

```js
import Chart from "chart.js/auto";
import chart2music from "chartjs-plugin-chart2music";

Chart.register(chart2music);

new Chart(canvasElement, {
    type: "bar",
    data: {
        labels: ["Q1", "Q2", "Q3", "Q4"],
        datasets: [{label: "Revenue", data: [1, 4, 2, 8]}]
    }
});
```

Or add it to one chart only:

```js
new Chart(canvasElement, {
    type: "bar",
    data: {
        datasets: [{data: [1, 4, 2, 8]}]
    },
    plugins: [chart2music]
});
```

When no `cc` element is supplied, the plugin creates a caption element immediately after the canvas. Supply your own element when you need to control where the Chart2Music output appears.

## Plugin options

Configure the plugin through `options.plugins.chartjs2music`:

```js
new Chart(canvasElement, {
    type: "bar",
    data: {
        labels: ["Q1", "Q2", "Q3", "Q4"],
        datasets: [{label: "Revenue", data: [1, 4, 2, 8]}]
    },
    options: {
        plugins: {
            chartjs2music: {
                cc: outputElement,
                lang: "en",
                axes: {
                    x: {label: "Quarter"},
                    y: {
                        label: "Revenue",
                        format: (value) => `$${value.toLocaleString()}`
                    }
                },
                options: {
                    enableSound: true,
                    onFocusCallback: (point) => console.log(point),
                    onSelectCallback: ({point}) => console.log(point)
                },
                errorCallback: console.error
            }
        }
    }
});
```

Available plugin options:

- `cc`: Element that receives Chart2Music's accessible chart caption. Optional.
- `lang`: Chart2Music language. Supported values include `en`, `de`, `es`, `fr`, and `it`; default is `en`.
- `axes`: Chart2Music axis configuration, including labels and value formatters.
- `audioEngine`: A custom Chart2Music audio engine.
- `options`: Chart2Music interaction options such as `enableSound`, `onFocusCallback`, and `onSelectCallback`.
- `errorCallback`: Receives errors while the plugin initializes or updates a chart.

## Supported charts

The plugin supports Chart.js bar, line, pie, doughnut, polar area, and scatter charts, including mixed bar/line configurations. It also supports:

- Box plots from [`@sgratzl/chartjs-chart-boxplot`](https://www.npmjs.com/package/@sgratzl/chartjs-chart-boxplot).
- Matrix plots from [`chartjs-chart-matrix`](https://www.npmjs.com/package/chartjs-chart-matrix).
- Word clouds from [`chartjs-chart-wordcloud`](https://www.npmjs.com/package/chartjs-chart-wordcloud).
- Chart titles, axis titles, minimum and maximum values, linear and logarithmic axes, custom axis formatting, dataset visibility, and chart data updates.

Visual-only Chart.js settings such as color, padding, and line thickness do not affect the sonification. Advanced Chart.js parsing configurations and nonstandard axis identifiers are not currently supported.

## Future support

Planned support includes:

- Chart subtitles.
- Radar plots.
- Error bars via [`chartjs-chart-error-bars`](https://www.npmjs.com/package/chartjs-chart-error-bars).
- Parallel coordinate plots via [`chartjs-chart-pcp`](https://www.npmjs.com/package/chartjs-chart-pcp).
- Zoom interactions via [`chartjs-plugin-zoom`](https://www.npmjs.com/package/chartjs-plugin-zoom).

## Examples and Storybook

The repository includes runnable chart configurations under [`stories/charts`](./stories/charts), covering the supported chart types and plugin integrations. A Storybook catalogue exposes these examples as Bar, Line, Multi-chart, Distribution, Circular, Scatter, Matrix, Word cloud, and Options stories.

```bash
npm run storybook
```

Build the static Storybook site with:

```bash
npm run build-storybook
```

More examples are available in the [CodePen collection](https://codepen.io/collection/VYEvEQ).

## Development

```bash
npm test
npm run build
npm run depcheck
```

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