JSFiddle - React, Tailwind, and code Playground

by swwebb1

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

JavaScript

var img_path = 'https://cdn2.iconfinder.com/data/icons/navigation-set-arrows-part-two/32/Arrow_Right_Circle-48.png'


 Highcharts.chart('container', {
 	chart: {
 		polar: true,
 		type: 'area'
  },
  plotOptions: {
  	series: {
   		animation: true
    }
  },
  title: {
   	text: undefined
  },
  xAxis:{
   	tickmarkPlacement: 'on',
    lineWidth: 0, 
    labels: {
  	  formatter: function() {		
	    	return '<img src="' + img_path + '" style="width:45px;height:45px;" />';
    	},
    	useHTML: true,
    	align: 'center'
    }
  },
  yAxis: {
   	gridLineInterpolation: 'polYmaxygon',
    lineWidth: 0,
    min: 0,
    max: 10,
    labels: {
    	style: {
      	'fontSize' : '14px'
      }
    }
  },
  legend: {
   	enabled: false
  },
  series:[
   	{
    	data: [{x:1, y:4}, {x:2, y:7}, {x:3, y:2}, {x:4, y:5}, {x:5, y:8}],
      pointPlacement: 'on'
    },
    {
      data: [{x:1, y:4}, {x:2, y:7}, {x:3, y:4}, {x:4, y:1}, {x:5, y:4}],
      pointPlacement: 'on'
    }      
  ]
 });