JSFiddle - React, Tailwind, and code Playground

by malonso

HTML

<script type="text/javascript" src="http://foolz.net/js/highcharts/highcharts.src.js"></script>

<div id="runmode_coverage_chart" style="height: 400px; width: 500px"></div>


<div id="errors">
</div>

JavaScript

var data = '{"chart":{"renderTo":"runmode_coverage_chart","defaultSeriesType":"area"},"title":{"text":"Test"},"xAxis":{"title":{"text":"Test"}},"yAxis":{"title":{"text":"Y Axis"}},"plotOptions":{"area":{"stacking":"normal","lineColor":"#666666","lineWidth":1}},"series":[{"name":"Dataset 1","data":[0.92784552845528]},{"name":"Dataset 2","data":[0.072154471544715]}]}';


var j = JSON.parse(data);
j.tooltip =  {
    formatter : function () {
       return this.series.name;
    }
};


try{
var chart = new HighCharts.Chart(j);
    
}
catch(err)
{
    $('#errors').html(err.toString());
}




/****
the json above, but formatted:

{
   "chart":{
      "renderTo":"chart",
      "defaultSeriesType":"area"
   },
   "title":{
      "text":"Test"
   },
   "xAxis":{
      "title":{
         "text":"Test"
      }
   },
   "yAxis":{
      "title":{
         "text":"Y Axis"
      }
   },
   "plotOptions":{
      "area":{
         "stacking":"normal",
         "lineColor":"#666666",
         "lineWidth":1
      }
   },
   "series":[
      {
         "name":"Dataset 1",
         "data":[
            0.92784552845528
         ]
      },
      {
         "name":"Dataset 2",
         "data":[
            0.072154471544715
         ]
      }
   ]
}


**/