A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/julianna-langston/chartjs2music below:

julianna-langston/chartjs2music: chartjs plugin for chart2music

chartjs-plugin-chart2music

This is a beta release of this plugin. Not all chart.js features are supported yet.

Turns your chart.js charts into music so the blind can hear data. This plugin will automatically add Chart2Music, an interactive sonification library, to your chart.js charts. The contents of the chart element will be modified to best support screen reader users, and the interactions will be visually synchronized to provide support for keyboard-only users.

Check out our CodePen collection of examples using the plugin.

Add the chartjs2music plugin to your existing chart.js code like this:

import {Chart} from "chart.js/auto";
import chartjs2music from "chartjs-plugin-chart2music";

Chart.register(chartjs2music);

That will register the plugin globally. Alternatively, if you only want to enable for a given chart, you can do this:

import {Chart} from "chart.js/auto";
import chartjs2music from "chartjs-plugin-chart2music";

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

The following plugin options are available:

Here's an example for providing options:

import {Chart} from "chart.js/auto";
import chartjs2music from "chartjs-plugin-chart2music";

new Chart(canvasElement, {
    type: "bar",
    data: {
        datasets: [{
            data: [1,4,2,8]
        }]
    },
    options: {
        plugins: {
            chartjs2music: {
                // All errors should be logged as errors
                errorCallback: console.error,
                // Here's a div I made to be the CC
                cc: myDiv,
                // The Y values should all be money
                axes: {
                    y: {
                        format: (value) => "$" + value
                    }
                }
            }
        }
    },
    plugins: [chartjs2music]
});

If you are using TypeScript, replace the first 4 lines with this:

import {Chart, type ChartTypeRegistry} from "chart.js/auto";
import chartjs2music from "chartjs-plugin-chart2music";

new Chart(canvasElement, {
    type: "bar" as keyof ChartTypeRegistry,

This plugin is currently in beta, so not all of the chart.js features are currently supported.

A quick list of chart.js features we currently support includes:

Note that visual-specific chart features are ignored. This includes things like color, padding, line thickness, etc.

Things we plan to support in the future:

Plugins we plan to support in the future:


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4