JSFiddle - React, Tailwind, and code Playground

by aboli23

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.zoomscatter.js?cacheBust=8232"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js?cacheBust=8232"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<div id="chartContainer">FusionCharts will render here</div>
<br/>
<div id="chartContainer1">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var selectivityChart = new FusionCharts({
    type: 'zoomscatter',
    renderAt: 'chartContainer',
    width: 600,
    height: 400,
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Result Data",
        "yaxisname": "Y",
        "xaxisname": "X",
        "anchorBgColor": "#FF0000",
        "anchorradius": "6",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
      },
      "dataset": [{
        "seriesname": "Cluster A",
        "anchorBgColor": "#addef7",
        "anchorBordercolor": "#17a1e8",
        "anchorBorderThickness": "1",
        "data": [{
          "y": 14.42,
          "x": 18.88,
          "tooltext": "A1"
        }, {
          "y": 10.54,
          "x": 17.29,
          "tooltext": "A2"
        }, {
          "y": 12.51,
          "x": 4.72,
          "tooltext": "A3"
        }, {
          "y": 10.89,
          "x": 18.94,
          "tooltext": "A4"
        }, {
          "y": 13.21,
          "x": 15.05,
          "tooltext": "A5"
        }, {
          "y": 11.43,
          "x": 14.84,
          "tooltext": "A6"
        }, {
          "y": 10.21,
          "x": 10.38,
          "tooltext": "A7"
        }, {
          "y": 11,
          "x": 9.15,
          "tooltext": "A8"
        }, {
          "y": 13.18,
          "x": 9.03,
          "tooltext": "A9"
        }, {
          "y": 14.71,
          "x": 4.13,
          "tooltext": "A10"
        }]
      },{
        "seriesname": "Cluster B",
        "anchorBgColor": "#f7cc63",
        "anchorBordercolor": "#f3b00c",
        "anchorBorderThickness": "1",
        "data": [{
          "y": 8.56,
          "x": 15.75,
          "tooltext": "B1"
        }, {
          "y": 7.16,
          "x": 15.09,
          "tooltext": "B2"
        }, {
          "y": 8.23,
          "x":...