JSFiddle - React, Tailwind, and code Playground

by Piseth Ath

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="container21" style="min-width: 240px; max-width: 360px; height: 254px; margin: 0 auto"></div>
<br />
<div id="container22" style="min-width: 240px; max-width: 360px; height: 254px; margin: 0 auto"></div>
<br />
<div id="container23" style="min-width: 240px; max-width: 360px; height: 254px; margin: 0 auto"></div>
<br />
<div id="container24" style="min-width: 240px; max-width: 360px; height: 254px; margin: 0 auto"></div>

JavaScript

/**
 * However this second section of code does NOT work as nothing is displayed in the container21 div...
 * What am I doing wrong here?
 * I like to be able to create a new chart by only supplying the target div ID and the dataArray's, this
 * to have be able to manage the general settings centrally.
 *
 * This JSFIDDLE is related to: http://jsfiddle.net/golabs/tpKU3/
 *
 * The issue has been FIXED as you can see. Thanks to Wergeld and Matthias. See also: http://stackoverflow.com/questions/23408601/highcharts-multiple-charts-on-page-call-via-function
**/
$(function () {
  var __catergories__ = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'];
  
  var getChartConfig = function( renderId, dataArray1, dataArray2 ) {
    var config = {};
    config.chart = {
      renderTo: renderId, polar: true, type: 'line', height: 254, width: 360, className: 'SpiderPolarChart', backgroundColor: 'rgba(101,101,101,.1)'
    };
    config.title = {
      text: ''       
    };
    config.legend = {
      layout: 'horizontal', align: 'center', verticalAlign: 'bottom', y: -3
    };
    config.credits = {
      enabled: true, text: 'highcharts.com', href: 'http://highcharts.com/', position: {
        verticalAlign: 'bottom', x: -11
      }
    };
    config.pane = {
      startAngle: -90, endAngle: 90, center: ['50%', '93%'], size: 300, background: null
		};
    config.xAxis = {
      categories: __catergories__,
      tickmarkPlacement: 'on', tickPixelInterval: 1, lineWidth: 0, labels: {
        rotation: 'auto', distance: 12
      }, showLastLabel: true   
    };
    config.yAxis = {
      gridLineInterpolation: 'circle', gridLineDashStyle: 'LongDash', tickInterval: 1, lineWidth: 0, min: 0, max: 5, ceiling: 5, labels: {
        x: 4, y: 15
      }, showLastLabel: true
    };
    config.exporting = { 
      enabled: false
    };
    config.tooltip = {
        enabled: true, shared: true, pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
    };
  ...