TypeScript icon, indicating that this package has built-in type declarations

1.17.0 • Public • Published


Chart2Music turns charts into music so the blind can hear data.

npm version Build verification Known Vulnerabilities codecov

Key features

  • Inclusively designed - The dev team behind C2M includes blind people in the design, development, and testing stages.
  • Accessibility for screen reader users - Enables blind users to quickly absorb information about charts and graphs using sound and exploration.
  • Easier maintenance for accessibility requirements - Traditionally, charts and graphs would be made accessible using alt text, which can be difficult to generate or maintain, or data tables, which provide a poor end user experience. C2M provides an automated solution while enhancing the user experience.
  • Visual agnostic - Use C2M alongside your charts, regardless of how your visuals were created. ChartJS? D3.js? An image? C2M works in parallel with your visuals.
  • Use anywhere, for free - C2M is MIT licensed, so you can integrate into anything - personal, commercial, government, etc.

Getting started

Include the following script tag on your page:

<script src=""></script>

On your page, you will also need your chart. For the sake of simplicity, here's an example with an image and an element for screen reader text:

<img src="mychart.png" id="MyChart" />
<div id="screenReaderText"></div>

Now, in your javascript, you can start a new instance of Chart2Music. In this example, we will include a simple bar chart, and point it to the img element above.

const {err} = c2mChart({
    type: "bar",
    element: document.getElementById("MyChart"),
    cc: document.getElementById("screenReaderText"),
    data: [1,2,3]

// If there was an error in generating the chart, print the error message

What will the user experience be? When the user navigates to the image, a description will be automatically generated, telling the user that there is interaction available. Then, the user can use arrow keys or keyboard shortcuts to interact with the data.


For code examples in action, see the Chart2Music Examples collection on Codepen.

Some of the examples you will find there include:

You can also find examples of integrations with other visualization libraries:

Go to for the full tutorial.

Package Sidebar


npm i chart2music

Weekly Downloads






Unpacked Size

891 kB

Total Files


Last publish


  • julianna-langston