JSFiddle - React, Tailwind, and code Playground

by maritavindedal

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/xrange.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">The following chart demonstrates some Accessibility features of Highcharts, including use of the <code>exposeAsGroupOnly</code> option.
    The <code>exposeAsGroupOnly</code> is set to true in this demo for two of the series, which means that only the series element is exposed to a screen reader, not its points.
    In this demo, you are only able to view the series element of Emma and Alex, but you can navigate the individual points for John.
</p>
</figure>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
    padding-bottom: 5px;
    font-family: Verdana, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    color: #555;
}

table {
    font-family: Verdana, sans-serif;
    font-size: 12pt;
    color: #555;
    border-collapse: collapse;
    border: 3px solid #ccc;
    margin: 2px auto;
}

tr {
    border-bottom: 2px solid #eee;
}

th {
    border-left: 2px solid #eee;
    border-right: 2px solid #eee;
    padding: 12px 15px;
    border-collapse: collapse;
}

th[scope="col"] {
    background-color: #ffe;
}

th[scope="row"] {
    background-color: #f0fcff;
    text-align: left;
}

td {
    border-left: 2px solid #eee;
    border-right: 2px solid #eee;
    padding: 12px 15px;
    border-collapse: collapse;
}

JavaScript

Highcharts.Templating.helpers.sum = function () {
    return this.series.points.reduce((sum, point) => sum + point.y, 0);
};

Highcharts.Templating.helpers.max = function () {
    return this.series.points.reduce((max, point) => Math.max(max, point.y), 0);
};

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Daily Steps Count'
    },
    xAxis: {
        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        accessibility: {
            description: 'Day of the week'
        }
    },
    yAxis: {
        title: {
            text: 'Steps'
        }
    },
    series: [{
        name: 'Emma',
        data: [9438, 4201, 10023, 9204, 10392, 7201, 8039],
        color: '#3A3691',
        accessibility: {
            descriptionFormat: '{series.name} walked the most in total ' +
            'during the week with {sum} steps.',
            exposeAsGroupOnly: true
        },
        dataLabels: {
            enabled: true
        },
        tooltip: {
            format: 'wtf'
        }
    }, {
        type: 'xrange',
        showInLegend: false,
        name: 'Total step count',
        color: '#009AFA',
        data: [{
            x: 0,
            x2: 6,
            y: 17000,
            partialFill: 0.83
        }],
        tooltip: {
            format: 'Checking'
        },
        dataLabels: {
            color: '#ffffff',
            enabled: true,
            format: '59.543 / 70.000 steps this week.',
            verticalAlign: 'top',
            style: {
                fontSize: '12px',
                fontWeight: 'bold'
            }
        }
    }]
});