website·Indexed 32 days ago
https://chart2music.com/docs/A library that turns charts into music to make data accessible to the blind. It features the c2mChart function for sonifying static and dynamic charts, supports hierarchical data for treemaps, and provides plugins for ECharts and ChartJS. The API includes configuration for various data structures like SimpleDataPoint, OHLCDataPoint, and BoxDataPoint, as well as integration options for vanilla HTML, React, and modern bundlers.
Chart2Music is a TypeScript/JavaScript package designed to make data visualizations accessible to blind and visually impaired users. It provides an automated solution for accessibility that works in parallel with any existing charting library (e.g., Chart.js, D3.js, HighCharts) or static images. Key capabilities include:
info.annotations property to provide additional details about specific events along the X-axis. Annotations are currently only supported on the X-axis and must be provided as an array of objects containing an x (number) and a label (string).{
type: "line",
title: "How Fast? How Furious?",
data: [6.8, 5.9, 6, 6.5, 7.3, 7, 7.1, 6.6, 5.2],
info: {
notes: ["Got ratings from IMDB"],
annotations: [
{
x: 6, // The index for the 7th movie
label: "Paul Walker's last movie"
}
]
}
}type property. To plot data against a secondary axis, use the y2 key instead of y for the corresponding data series.// Example: Bar-Line chart with alternative axes
c2mChart({
type: ["bar", "line"],
element: myElement,
data: {
Volume: [
{ x: 1, y: 100000 },
{ x: 2, y: 110000 },
],
ClosingPrice: [
{ x: 1, y2: 115.29 }, // Plotted on secondary axis
{ x: 2, y2: 130.06 },
],
},
});chartjs-plugin-chart2music plugin adds Chart2Music capabilities to Chart.js, enabling keyboard navigation, sonification, and screen-reader adaptations. It automatically derives chart metadata (title, type, data, axes) from the Chart.js configuration, removing the need to call c2mChart manually.npm install chart.js chartjs-plugin-chart2musiconFocusCallback. This callback receives the current point being navigated by the screen reader, allowing developers to programmatically highlight the corresponding visual element (such as a specific tile or node in a treemap) in real-time.chartjs-plugin-a11y-legend alongside chartjs-plugin-chart2music to provide keyboard and screen-reader accessible legends for toggling data groups.import { Chart } from "chart.js/auto";
import chartjs2music from "chartjs-plugin-chart2music";
import a11yLegend from "chartjs-plugin-a11y-legend";
Chart.register(chartjs2music, a11yLegend);useRef to create references for the chart container and the closed caption (CC) element. Initialize the C2M instance within a useEffect hook with an empty dependency array to ensure it runs once on mount.import React, { useRef, useEffect } from "react";
import { LineChart } from "wherever";
import { c2mChart } from "chart2music";
const App = (props) => {
const chartRef = useRef(null);
const ccRef = useRef(null);
useEffect(() => {
c2mChart({
type: "line",
element: chartRef.current,
cc: ccRef.current,
data: props.data,
});
}, []);
return (
<div>
<div ref={chartRef}>
<LineChart data={props.data} />
</div>
<div ref={ccRef}></div>
</div>
);
};chart2music in your project by adding a script tag pointing to the jsDelivr CDN. You can target the latest version, a specific major version (equivalent to ^1.0.0), or a specific version number. Note that jsDelivr may take up to 24 hours to refresh its cache after a new version is published; to ensure a specific version is used immediately, reference that version explicitly after the @ symbol.<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/chart2music"></script>
<!-- Latest minor version of v1 (equivalent to ^1.0.0) -->
<script src="https://cdn.jsdelivr.net/npm/chart2music@1"></script>c2mChart function accepts data in several formats depending on the complexity of the chart. You can provide a simple array of numbers, an array of x/y coordinate objects, or a dictionary where keys represent categories and values are arrays of x/y pairs.// Simple array of numbers
c2mChart({
type: "line",
element: myElement,
data: [1, 2, 3],
});
// Array of x/y pairs
c2mChart({
type: "line",
element: myElement,
data: [
{ x: 1990, y: 248709873 },
{ x: 2000, y: 281421906 },
],
});
// Dictionary for multiple categories (e.g., multi-line or grouped bar charts)
c2mChart({
type: "line",
element: myElement,
data: {
Australia: [{ x: 2010, y: 22019168 }, { x: 2011, y: 22357034 }],
Canada: [{ x: 2010, y: 33963412 }, { x: 2011, y: 34323531 }],
},
});c2mChart function directly from the chart2music package.import c2mChart from "chart2music";
c2mChart({...});echarts2music extension using echarts.use() and then call connect(chart) after initializing the chart and setting its options. The extension automatically derives chart titles, types, data, and axes from the ECharts option object.import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts";
import { GridComponent, TitleComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import echarts2music, { connect } from "echarts-extension-chart2music";
// Register the extension
echarts.use([
BarChart,
GridComponent,
TitleComponent,
TooltipComponent,
CanvasRenderer,
echarts2music,
]);
const chart = echarts.init(document.getElementById("sales-chart"));
chart.setOption({
title: { text: "Monthly sales" },
tooltip: {},
xAxis: {
type: "category",
name: "Month",
data: ["January", "February", "March"],
},
yAxis: {
type: "value",
name: "Sales",
},
series: [{ type: "bar", data: [12, 19, 8] }],
});
// Connect the chart to Chart2Music
const music = connect(chart);