JSFiddle - React, Tailwind, and code Playground

by Steven Goos

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

JavaScript

/**
 * This first section of code works fine and does display the charts in container11 and container12 div's.
 *
 * This JSFIDDLE is related to: http://jsfiddle.net/golabs/rstpA/
**/

$(function () {
  var __catergories__ = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'];
  
  Highcharts.setOptions({
    chart: {
      polar: true, type: 'line', height: 254, width: 360, className: 'SpiderPolarChart', backgroundColor: 'rgba(101,101,101,.1)'
    },
    title: {
      text: ''       
    },
    legend: {
      layout: 'horizontal', align: 'center', verticalAlign: 'bottom', y: -3,
    },
    credits: {
      enabled: true, text: 'highcharts.com', href: 'http://highcharts.com/', position: {
        verticalAlign: 'bottom',
        x: -11,
      }
    },
    pane: {
      startAngle: -90, endAngle: 90, center: ['50%', '93%'], size: 300, background: null
		},
    xAxis: {
      categories: __catergories__,
      tickmarkPlacement: 'on', tickPixelInterval: 1, lineWidth: 0, labels: {
        rotation: 'auto',
        distance: 12
      }, showLastLabel: true   
    },
    yAxis: {
      gridLineInterpolation: 'circle', gridLineDashStyle: 'LongDash', tickInterval: 1, lineWidth: 0, min: 0, max: 5, ceiling: 5, labels: {
        x: 4, y: 15
      }, showLastLabel: true
    },
    exporting: { 
      enabled: false
    },
    tooltip: {
      shared: true, pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
    }
	});
  
  // ===========================================================================
  var chart11 = new Highcharts.Chart({
    chart:{renderTo:'container11'},
    series:[{
      name: 'Overall Rating', data: [1.5,3,2,3,4,1,2], color: '#D4A539', type: 'area', pointPlacement: 'on', connectEnds: false, index: 1, legendIndex: 2
      },{
      name: 'Personal Rating', data: [1,4,1.5,3,2,3,1], color: '#333', type: 'line', pointPlacement: 'on', connectEnds: false, index: 2, legendIndex: 1            
    }]
  });
  //...