JSFiddle - React, Tailwind, and code Playground

by prathik

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>

JavaScript

var chartDef = {
    type:"svg",
    chart:{type:"pie"},
    plotOptions:{
    	series:{
      	showInLegend:true,
        dataLabels:{
        	enabled:true
          }
        }
      },
      legend:{
      	align:"right"
      },
      tooltip:{
        formatter:"function () { return <p>${x}(${y})</p>}"
      },
      title:"Chart",
      colors: ["#8CC350","#5A6EAA","#D755A5","#1EBED7","#F0A01E","#9B8CE6","#3CB5A0","#3287D2","#F0557D","#C3D250","#EB782D","#78B4F5","#5FAF69","#AA5FA5","#FA5A50","#F5C841"],
        xAxis:{
        	type:"category",
        	title:{
        		text:"titlex"
          },
            categories:[59,4,40, 59]
        },
        yAxis:{
        	title:{
          	text:"GuideUtil"
          }
        },
        series:[
        	{
          	//"data":[["59",30], ["4",41], ["40",34], ["59",60] ]
            "data":[30,41,34,60]
          }
          /*{
          	"name": "59",
          	"data":[30]
          },
          //,41,34
          {
          	"name": "4",
          	"data":[41]
          },
          {
          	"name": "40",
          	"data":[34]
          },
          //,41,34
          {
          	"name": "4",
          	"data":[50]
          }*/
        ]
};

Highcharts.chart('container', chartDef);