JSFiddle - React, Tailwind, and code Playground

by Eric Wu

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="objGrafico"></div>

JavaScript 1.7

function def_RadarCharts(p_conteinerObj) { this.conteinerObj = $(p_conteinerObj); this.title = ""; this.fnSetTitle = function (p_title) { this.title = p_title; }; this.xData = new Array(); this.fnAddXData = function (p_XDataArray) { this.xData = p_XDataArray }; this.series = []; this.fnSetSeries = function (p_series) { this.series = p_series; };
                                          
this.compile = function () { 
    this.conteinerObj
        .highcharts(
            { chart: { 
                  spacingLeft: 0, 
                  spacingBottom: 25, 
                  polar: true,
                  type: 'line' 
                  }, 
             tooltip: { 
                 crosshairs: true, 
                 shared: true, 
                 formatter: function () { 
                     var strResult = "<b> " + this.x + " </b>";
                     $.each(this.points, function (i, point) { 
                         strResult = strResult + "<br/>" +
                             point.series.name + ": " + 
                             Math.round(point.y * 100) / 100 }); 
                     return strResult; } 
             }, 
             title: {
                 text: this.title 
             }, 
             xAxis: { 
                 categories: this.xData, 
                 lineWidth: 0, 
                 legends: { 
                     style: { fontSize: '3px' } 
                 } 
             }, 
             yAxis: { 
                 gridLineInterpolation: 'polygon', 
                 lineWidth: 0, 
                 min: 0, 
                 tickInterval: 0.5, 
                 max: 5 
             }, 
             legend: { 
                 align: 'right', 
                 verticalAlign: 'top', 
                 y: 100, 
                 layout: 'vertical', 
                 style: {
                     fontSize:'4px'
                 } 
             }, 
             exporting: { 
                 enabled:true,
                ...