JSFiddle - React, Tailwind, and code Playground

by KSK Kushwah

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<button id="change_numbers">Toggle Numbers</button>
<button id="change_color">Toggle Contrast</button>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts(highChartsData);
  var state = false,hc=false;
  $("#change_numbers").click(function(){
		state == true ? series.update({data: [15, 15, 15, 15, 15, 15, 15]}, true) : series.update({data: [8, 2, 13, 5, 7, 13, 2, 10]}, true); 
    state = !state;
  });
  $("#change_color").click(function(){
  	hc == true ?
    series.update({color: {radialGradient: {cx: 0.5,cy: 0.5,r: 1},stops: [[0, 'rgba(147, 255, 228, 0.8)'],[1, 'rgba(0, 105, 165,1)']]}}, true) :
    series.update({color: {radialGradient: {cx: 0.5,cy: 0.5,r: 1},stops: [[0, 'rgba(0, 255, 0,1)'],[0.2, 'rgba(0, 0, 0, 1)']]}}, true);
    hc = !hc;
  });
});
var series;
var highChartsData = {
    chart: {
      polar: true,
      type: 'area',
      events: {
            load: function () {series = this.series[0];}
        }
    },
    xAxis: {
      categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      tickmarkPlacement: 'on',
      lineWidth: 0
      
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: 0,
      max: 12
    },
    tooltip: {
    	enabled: false
    },
    title: {
    	enabled: false
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Planning',
      type: 'area',
      color: {
        radialGradient: {
        	cx: 0.5,
          cy: 0.5,
          r: 1
        },
        stops: [
          [0, 'rgba(147, 255, 228, 0.8)'],
          [1, 'rgba(0, 105, 165,1)']
        ]
      },
      data: [15, 15, 15, 15, 15, 15, 15],
      pointPlacement: 'on'
    }]
  };