JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <div role="radiogroup">
        <div class="form-check form-check-inline" aria-activedescendant="themeLight" style>
            <input class="form-check-input" type = "radio" name="themes" id="themeDark" value="dark" role="radio">
            <label class="form-check-label" for="dark">Dark Theme</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-label" type="radio" name="themes" id="themeLight" value="light" role="radio" checked>
            <label class="form-check-label" for="themeLight" >Light theme</label>
        </div>
    </div>

<figure class ="highcharts-figure">
    <p class="highcharts-description">These four charts demonstrates the use of two high contrast themes.</p>
    <div class="container">
        <div class="row">
            <div id="container-column" class="col-6"></div>
            <div id="container-spline" class="col-6"></div>
            <div id="container-scatter" class="col-6"></div>
            <div id="container-map" class="col-6"></div>
            <div id="container-pie" class="col-6"></div>
        </div>
    </div>  
</figure>

CSS

.container-column, .container-spline, .container-scatter, .container-map, .container-pie {
    width: 50%;
	height: 400px;
	margin-bottom: 15px;
	float: left;
}

JavaScript

// Light and dark themes
const textBright = '#F0F0F3';

const lightTheme = {
    chart: {
        style: {
            fontFamily: 'Roboto,Arial'
        }
    },

    colors: [
        '#5f98cf',
        '#434348',
        '#49a65e',
        '#f45b5b',
        '#708090',
        '#b68c51',
        '#397550',
        '#c0493d',
        '#4f4a7a',
        '#b381b3'
    ],

    navigator: {
        series: {
            color: '#5f98cf',
            lineColor: '#5f98cf'
        }
    },

    title: {
        style: {
            color: '#333333',
            fontFamily: 'Roboto,Arial'
        }
    },

    subtitle: {
        style: {
            color: '#333333',
            fontFamily: 'Roboto,Arial'
        }
    },

    xAxis: {
        labels: {
            style: {
                color: '#333333'
            }
        },
        title: {
            style: {
                color: '#333333'
            }
        }
    },

    yAxis: {
        labels: {
            style: {
                color: '#333333'
            }
        },
        title: {
            style: {
                color: '#333333'
            }
        }
    }
};

const darkTheme = {
    colors: [
        '#a6f0ff',
        '#70d49e',
        '#e898a5',
        '#007faa',
        '#f9db72',
        '#f45b5b',
        '#1e824c',
        '#e7934c',
        '#dadfe1',
        '#a0618b'
    ],

    chart: {
        backgroundColor: '#1f1f20',
        plotBorderColor: '#606063',
        style: {
            fontFamily: 'Roboto,Arial'
        }
    },
    title: {
        style: {
            color: textBright,
            fontFamily: 'Roboto,Arial'
        }
    },

    subtitle: {
        style: {
            color: textBright,
            fontFamily: 'Roboto,Arial'
        }
    },

    xAxis: {
        gridLineColor: '#707073',
        labels: {
            style: {
                color: textBright
            }
        },
        lineColor: '#707073',
        minorGridLineColor:...