Highcharts Dashboards Demo

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>

<div id="container">

    </div>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

#dashboard-col-0 {
    text-align: center;
}

JavaScript

Dashboards.board('container', {
    gui: {
        layouts: [{
            id: 'layout-1',
            rows: [{
                cells: [{
                    id: 'dashboard-col-0'
                }, {
                    id: 'dashboard-col-1'
                }]
            }]
        }]
    },
    components: [{
        type: 'HTML',
        renderTo: 'dashboard-col-0',
        elements: [
            {
                tagName: 'h1',
                textContent: 'Your first dashboard'
            }
        ]
    }, {
        renderTo: 'dashboard-col-1',
        type: 'Highcharts',
        chartOptions: {
            accessibility: {
                screenReaderSection: {
                    beforeChartFormat: '<h3>A new chart title that is a heading 3</h3><div>{typeDescription}</div><div>{chartSubtitle}</div><div>{chartLongdesc}</div><div>{playAsSoundButton}</div><div>{viewTableButton}</div><div>{xAxisDescription}</div><div>{yAxisDescription}</div><div>{annotationsTitle}{annotationsList}</div>'
                }
            },
            lang: {
                accessibility: {
                    chartContainerLabel: 'This is a new chart container label without the word interactive',
                    svgContainerLabel: 'This is a SVG container label',
                }
            },
            series: [{
                accessibility: {
                    point: {
                        descriptionFormat: 'Slice {y} of {series.points.length}'
                    }
                },
                type: 'pie',
                data: [1, 2, 3, 4, 5]
            }]
        }
    }]
});