How to Create Accessible Charts in React: A Guide to Inclusive Data Visualisation

What is Accessibility in Data Visualisation

Data visualisation is key to communication but we found that many of the popular charting and graph libraries in ReactJS can be inaccessible to people using a screen reader. Accessibility in data visualisation is essential to making sure that all users, regardless of how they consume that data, can understand and interact with charts and graphs on your website.

We've recently tested out Highcharts, and have been impressed with the tools and features baked into the library to help you create accessible charts in React. Highcharts do charge for a license to use their software, but the quality and feature-set you get with Highcharts outstrips any of the open source alternatives we've used.

Choosing the Right Chart Type

Different chart types serve different data and user needs, making the selection process critical for effective and clear data visualisation. For example, bar charts are excellent for presenting categorical data and comparing values across multiple categories and subcategories. They clearly illustrate the differences between data points, making trends easy to spot. In this chart, each bar represents the sales figures for a different product category across four quarters, allowing for a straightforward comparison of sales performance within each category over time.

Line charts are ideal for visualising data over time, helping to illustrate trends, progressions, or changes in a continuous dataset. They are particularly useful when you need to show the relationship between different data points over time, such as tracking the performance of a product or monitoring the growth in website traffic over a period.

Spline charts, a variation of line charts, offer a smoother curve by using splines (pronounced /splaɪn/ - rhymes with line) instead of straight lines to connect data points. This type of chart is good for emphasising the smoothness of transitions or when the data represents a pattern that naturally follows a curved pattern, such as temperature changes throughout a day.

Choosing the right chart type is essential for clear and effective data visualization. Highcharts provides a wide range of chart types, including bar charts, line charts, spline charts, and scatter plots, enabling you to select the best option tailored to your specific data and the insights you wish to convey.

Creating Accessible Charts in React with Highcharts

Highcharts makes it easy to create accessible charts. Here’s how to create a simple accessible line chart in a React application:

Code example:

Install the highcharts and highcharts-react-official packages:

npm install highcharts highcharts-react-official

Create a simple line chart component:

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

HighchartsAccessibility(Highcharts);

export const AccessibleChart = () => {
  const options = {
    title: {
      text: 'Monthly Sales Data'
    },
    xAxis: {
      categories: [
        'January', 'February', 'March', 'April', 'May', 'June', 
        'July', 'August', 'September', 'October', 'November', 'December'
      ],
      title: {
        text: 'Month'
      }
    },
    yAxis: {
      title: {
        text: 'Sales (in thousands)'
      }
    },
    series: [
      {
        name: 'Sales',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }
    ],
    accessibility: {
      enabled: true,
      description: 'This chart shows the monthly sales data over a year, with sales peaking in September and October.'
    }
  };

  return (
    <HighchartsReact highcharts={Highcharts} options={options} />
  );
};

In this example the HighchartsAccessibility module is imported and initialised to enable accessibility features. The accessibility option in the chart configuration provides descriptions for screen readers.

Chart Design Best Practices

We always keep 3 points in mind when designing accessible charts:

• Accessibility: Design charts with screen reader support and high-contrast colours to accommodate all users.
• Simplicity: Keep charts straightforward and easy to interpret, with clear and concise labels and annotations.
• Colour Considerations: Avoid relying solely on colour to convey information, ensuring the data is accessible to users with colour vision deficiencies.

Creating accessible charts is key to all users being able to read and interact with your visualisations. By following best practices developers can create clear, accessible & useful charts.

At Tiny Octopus we make enterprise websites and applications more accessible and inclusive. We can help you integrate these into your business so all of your users have a more inclusive digital experience.

Are your charts accessible to everyone?