JSFiddle - React, Tailwind, and code Playground

by FusionCharts

HTML

<script src="https://s3.amazonaws.com/fusionimplementation/fusion_excel_export/fusioncharts.js"></script>
<!-- Box and Whisker chart is a statistical chart which is used to examine and summarize a given set of data. It helps in interpreting the distribution of data. It gives us an idea where most of the numbers reside, i.e. where the frequency of numbers are more. It draws the statistical conclusion using five number summary principle. The Box and Whisker chart is very useful to observe the mean, median, upper and lower quartiles, deviations, etc. for a huge set of data. 
The Excel Export feature has been enabled in this sample. Click the menu button and select the format to Export to Excel.
-->
<div id="chart-container">FusionCharts will render here</div>

CSS

html,body,#chart-container {
  width : 100%;
  height : 100%;
  overflow : hidden;
}

JavaScript

FusionCharts.ready(function () {
    var salaryDistribution = new FusionCharts({
        type: 'boxandwhisker2d',
        renderAt: 'chart-container',
        width: '96%',
        height: '96%',
        dataFormat: 'json',
        dataSource:
        {
            "chart": {
                "caption": "Distribution of annual salaries",
                "subcaption": "By Gender",                
                "xAxisName": "Pay Grades",
                "YAxisName": "Salaries (In USD)",                
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
                "bgColor": "#ffffff",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "showBorder": "0",
                "showCanvasBorder": "0",
                "showAlternateHGridColor": "0",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "legendPosition": "right",
                "showValues": "0",                
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5"     ,
                "exportEnabled":"1",
                "exportMode": "server",
                "clickURL":"https://www.google.com"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "Grade 1"
                        }, 
                        {
                            "label": "Grade 2"
                        }, 
                        {
                            "label": "Grade 3"
                        }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname":...