JSFiddle - React, Tailwind, and code Playground

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://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://github.highcharts.com/modules/accessibility.src.js"></script>
<script src="https://rawgit.com/highslide-software/pattern-fill/master/pattern-fill-v2.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
	padding-bottom: 5px;
	font-family: 'Verdana';
	font-size: 14pt;
	font-weight: bold;
	color:#555555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;
	color:#555555;              
	border-collapse: collapse;
	border: 3px solid #CCCCCC;
	margin: 2px auto;	
}

tr {
  	border-bottom: 2px solid #EEEEEE;
}

th {
	border-left: 2px solid #EEEEEE;
	border-right: 2px solid #EEEEEE;
	padding: 12px 15px;
	border-collapse: collapse;
}

th[scope="col"] {
	background-color: #ffffcc;
}

th[scope="row"] {
	background-color: #d5f2fd;
	text-align:left;
}

td {
  	border-left: 2px solid #EEEEEE;
  	border-right: 2px solid #EEEEEE;
  	padding: 12px 15px;
  	border-collapse: collapse;
}

JavaScript

$(function () {

    $('#container').highcharts({
        accessibility: {
            enabled: true,
            description: 'Most commonly used desktop screen readers in July 2015 as reported in the Webaim Survey. Shown as percentage of respondents.'
        },

        chart: {
            type: 'pie'
        },

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

        subtitle: {
            text: 'Click on point to visit official website'
        },

        plotOptions: {
            series: {
                dataLabels: {
                    connectorColor: Highcharts.getOptions().colors[0]
                },
                point: {
                    events: {
                        click: function () {
                            window.location.href = this.website;
                        }
                    }
                }
            },
            pie: {
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },

        series: [{
            name: 'Percentage usage',
            borderColor: Highcharts.getOptions().colors[0],
            data: [{
                name: 'JAWS',
                y: 30.2,
                website: 'https://www.freedomscientific.com/Products/Blindness/JAWS',
                color: 'url(#highcharts-default-pattern-0)'
            }, {
                name: 'ZoomText',
                y: 22.2,
                website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader',
                color: 'url(#highcharts-default-pattern-1)'
            }, {
                name: 'Window-Eyes',
                y: 20.7,
                website: 'http://www.gwmicro.com/window-eyes',
                color: 'url(#highcharts-default-pattern-2)'
            }, {
                name: 'NVDA',
                y: 14.6,
                website:...