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/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>

JavaScript

// Fake data for Gender Identity
const genderData = [
    { name: 'Unknown', y: 28.4 },
    { name: 'Non-binary', y: 2.2 },
    { name: 'Woman', y: 50.0 },
    { name: 'Man', y: 19.4 }
];

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', {
    gui: {
        layouts: [{
            rows: [{
                cells: [{
                    id: 'chart1'
                }, {
                    id: 'chart2'
                }]
            }]
        }]
    },
    components: [{
        sync: {
            enabled: true // Synchronize the charts
        },
        renderTo: 'chart1',
        type: 'Highcharts',
        chartOptions: Highcharts.merge(commonDonutOptions, {
            title: {
                text: 'Gender Identity Chart 1'
            },
            series: [{
               ...