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="gender-identity-dashboard"></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

// Common Donut Chart Options
const commonDonutOptions = {
    title: {
        align: 'left'
    },
    plotOptions: {
        pie: {
            size: '93%',
            innerSize: '65%',
            dataLabels: {
                enabled: true,
                format: '{point.name}: {point.percentage:.1f}%',
                style: {
                    fontSize: '16px'
                }
            }
        }
    },
    chart: {
        type: 'pie'
    },
    legend: {
        enabled: true,
        align: 'right',
        verticalAlign: 'center',
        layout: 'vertical'
    },
    tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color: {point.color}">\u25CF</span> {point.name}: <b>{point.percentage:.1f}%</b><br/>'
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 450
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                }
            }
        }]
    },
    accessibility: {
        point: {
            descriptionFormat: '{name}: {y}%'
        }
    }
};

// Highcharts Dashboard Configuration
Dashboards.board('gender-identity-dashboard', {
    dataPool: {
        connectors: [{
            id: 'genderData',
            type: 'CSV',
            options: {
                csvURL: './fake_gender_data.csv'
            }
        }]
    },
    gui: {
        layouts: [{
            rows: [{
                cells: [{
                    id: 'chart1'
                }, {
                    id: 'chart2'
                }]
            }]
        }]
    },
    components: [{
        sync: {
            enabled: true // Synchronize the charts
        },
        renderTo: 'chart1',
        connector: {
            id: 'genderData'
        },
        type: 'Highcharts',
        columnAssignment: {
            'Response': 'name',
            'Value':...