JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
function setData(){
    console.log('test');
    zingchart.exec('myChart', 'modifyplot', {
        graphid : 0,
        data : {
            values : [[18,21,24,26,28],[17,19,24,27,29]]
        }
    });                         
}
</script>
<div id="myChart"></div>
<button onclick="setData()">setdata()</button>

JavaScript

zingchart.MODULESDIR = "http://cdn.zingchart.com/modules/";
var myData = {
    "type":"boxplot",
    "title":{
        "text":"Summer ____ Olympic Athlete Ages"
    },
    "plotarea":{
        "margin-bottom":"26%"
    },
    "scaleX":{
        "item":{
            "angle":-90,
            "font-size":9
        },
        "max-items":999,
        "items-overlap":true,
        "values":["Art Competitions - Female","Art Competitions - Male","Athletics - Female","Athletics - Male","Basketball - Male","Boxing - Male","Canoeing - Female","Canoeing - Male","Cycling - Male","Diving - Female","Diving - Male","Equestrianism - Male","Fencing - Female","Fencing - Male","Football - Male","Gymnastics - Female","Gymnastics - Male","Hockey - Male","Modern Pentathlon - Male","Rowing - Male","Sailing - Male","Shooting - Male","Swimming - Female","Swimming - Male","Water Polo - Male","Weightlifting - Male","Wrestling - Male"]
    },
    "scaleY":{
        
    },
    "plot":{
        "max-trackers":999
    },
    "options":{
        "box":{
            "tooltip":{
                "text":"<span style=\"font-style:italic;\">%scale-key-text</span><br><b style=\"font-size:15px;\">Observations:</b><br><br>Maximum: <b>%data-max</b><br>Upper Quartile: <b>%data-upper-quartile</b><br>Median: <b>%data-median</b><br>Lower Quartile: <b>%data-lower-quartile</b><br>Minimum: <b>%data-min</b>"
            }
        },
        "outlier":{
            "tooltip":{
                "text":"<span style=\"font-style:italic;\">%scale-key-text</span><br><b style=\"font-size:15px;color:%color-7\">Age: %node-value</b>"
            },
            "marker":{
                "background-color":"none",
                "size":3,
                "shadow":false
            }
        }
    },
    "series":[
        {
           ...