Accessible pie chart

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>

<div id="chart-wrap">
    <label id="peLbl">
      <input type="checkbox" id="patternsEnabled" checked>
      Enable color patterns
    </label>

    <figure class="highcharts-figure">
        <div id="container"></div>
        <p class="highcharts-description">
            Pie chart demonstrating some accessibility features of Highcharts.
            The chart shows which screen reader is used as the primary screen reader
            by the respondents, with NVDA currently being the most popular one.
            The JAWS screen reader is following closely behind.
        </p>
    </figure>
</div>

CSS

#patternsEnabled {
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin-top: 0;
  cursor: pointer;
}

#peLbl {
  cursor: pointer;
}

#container {
    height: 420px; 
}

#chart-wrap {
    min-width: 350px;
    max-width: 700px;
    margin: 1em auto;
    font-family: sans-serif;
}

.highcharts-figure, .highcharts-data-table table {
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

function getColorPattern(i) {
    var colors = Highcharts.getOptions().colors,
        patternColors = [colors[2], colors[0], colors[3], colors[1], colors[4]],
        patterns = [
            'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
            'M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5',
            'M 2 0 L 2 5 M 4 0 L 4 5',
            'M 0 2 L 5 2 M 0 4 L 5 4',
            'M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5'
        ];

    return {
        pattern: {
            path: patterns[i],
            color: patternColors[i],
            width: 5,
            height: 5,
            patternTransform: 'scale(1.4 1.4)'
        }
    };
}

var clrs = Highcharts.getOptions().colors;
var defaultColors = [clrs[2], clrs[0], clrs[3], clrs[1], clrs[4]];
var patternColors = [0, 1, 2, 3, 4].map(getColorPattern);

var chart = Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },

	colors: patternColors,

    title: {
        text: 'Primary desktop/laptop screen readers'
    },

    subtitle: {
        text: 'Source: WebAIM. Click on point to visit official website'
    },

    tooltip: {
        valueSuffix: '%',
        borderColor: '#8ae'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                connectorColor: '#777',
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            point: {
                events: {
                    click: function () {
                        window.location.href = this.website;
                    }
                }
            },
            cursor: 'pointer',
            borderWidth: 3
        }
    },

    series: [{
        name: 'Screen reader usage',
        data: [{
            name: 'NVDA',
            y: 40.6,
            website: 'https://www.nvaccess.org',
            accessibility: {
                description: 'This is the most used desktop screen reader'
           ...