Highcharts Demo

author(s): Marita Vindedal

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/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        The following chart is demonstrating a very simple configuration with the Accessibility-module included.
        It is showing that if you include the module, and you have given some basic chart options, like 
        <code>yAxis.title.text</code>, <code>xAxis.title.text</code>, <code>series.name</code> and <code>tooltip.valueSuffix</code>
        Highcharts will by default make the text available to a screen reader when these options are set, without the need of adding
        options to the Accessibility-module.
    </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.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Corn vs wheat estimated production for 2020',
        align: 'left'
    },
    subtitle: {
        text:
            'Source: <a target="_blank" ' +
            'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>',
        align: 'left'
    },
    xAxis: {
        categories: ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia'],
        crosshair: true,
        title: {
            text: 'Countries'
        }
    },
    yAxis: {
        title: {
            text: '1000 metric tons (MT)'
        }
    },
    tooltip: {
        valueSuffix: ' (1000 MT)'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    accessibility: {
    	enabled: false
    },
    series: [
        {
            name: 'Corn',
            data: [406292, 260000, 107000, 68300, 27500, 14500],
            color: '#0899FD'
        },
        {
            name: 'Wheat',
            data: [51086, 136000, 5500, 141000, 107180, 77000],
            color: '#8F8CD9'
        }
    ]
});