Responsive and Accessible Charts and Graphs

Chris Gilligan — Wed, 15 Mar 2017 13:24:55 +0000

I have been looking for a simple solution to create and manage “dashboard” type charts on a website. Something that would produce editable graphs, accessible content for screen readers, and fit into a responsive design.

Chartist.js is a simple and independent library to create SVG charts in the DOM. Various plugins are available to extend the functionality and display options. In this example, the accessibility and axis label plugins are used. There are also plugins available for frameworks, and for WordPress (as a TablePress plugin extension).

It makes a responsive chart, with an optional accessible table (hidden by default, but displayed on this example, to show the values).

Check out the CodePen attached to this post. You can interact with the chart by clicking on the legend labels to toggle the series on/off.

After a chart is set up, the only values a user would need to modify are the data variables at the top of the JS: labels and series. If the y-axis series values change, they would have to modify axisY values for ticks, high/low. The remainder of the JS is display parameters and accessibility options.

See the Pen Chartist Graph with (visible) accessibility, point label, legend and axis label plugins: CCTN by utcwebdev (@utcwebdev) on CodePen.

The post Responsive and Accessible Charts and Graphs appeared first on Chris Gilligan » new media.

Accessibility Archives - Chris Gilligan » new media

Responsive and Accessible Charts and Graphs