Highcharts Demo

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

<figure class="highcharts-figure">
  <button>
  button
  </button>
  <div id="container"></div>
  <button>
  button
  </button>
</figure>

CSS

.highcharts-figure {
    margin: 0;
}

#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;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },

    title: {
        text: 'Desktop screen readers'
    },

    caption: {
        text: 'Basic bar chart demo'
    },

    xAxis: {
        type: 'category'
    },
    

    series: [{
        name: 'Percentage usage',
        data: [{
            name: 'JAWS',
            y: 30.2,
            accessibility: {
                description: 'This is the most used desktop screen reader'
            }
        }, {
            name: 'ZoomText',
            y: 22.2
        }, {
            name: 'Window-Eyes',
            y: 20.7
        }, {
            name: 'NVDA',
            y: 14.6
        }, {
            name: 'VoiceOver',
            y: 7.6
        }, {
            name: 'System Access To Go',
            y: 1.5
        }, {
            name: 'ChromeVox',
            y: 0.3
        }, {
            name: 'Other',
            y: 2.9
        }]
    }, {
        name: 'Test values',
        data: [3, 6, 8, 10, 4, 1, 1, 0]
    }]
});