JSFiddle - React, Tailwind, and code Playground

by webspicer

HTML

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>

<div id="chartdivi_fi"> </div>

CSS

#chartdivi_fi{height:300px; margin:10px 0px 0px 0px; cursor: pointer;}

JavaScript

var charti;
var legend;

var chartDatai = 
[
	{
		Category: "Vanguard",
		amount: 1512354,
	}, 
	{
		Category: "Newport Group",
		amount: 915421
	}, 
	{
		Category: "Morgan Stanley Smith Barney",
		amount: 656120,
	}, 
	{
		Category: "Fidelity NetBenefits",
		amount: 336598,
	}, 
	{
		Category: "ING Retirement",
		amount: 275231,
	}, 
	{
		Category: "Northrop Pacific Capital Management bharnai kumar chandrasekeramn",
		amount: 56120,
	}, 
	{
		Category: "Chase Bank",
		amount: 16882,
	}
];

AmCharts.ready(function() 
{
	
	// PIE CHART
	charti = new AmCharts.AmPieChart();
	charti.marginRight = 0;
	charti.marginLeft = 0;
	charti.marginBottom = 0;
	charti.marginTop = 0;
	charti.dataProvider = chartDatai;
	charti.titleField = "Category";
	charti.backgroundAlpha = 1;
	charti.pullOutRadius = "20";
	charti.backgroundColor = "#FFFFFF";
	
	charti.valueField = "amount";
	charti.radius = "35%";
	charti.labelsEnabled = 0;
	charti.outlineThickness = 2;
	charti.startDuration = .3;
	charti.startEffect = "<>";
	charti.sequencedAnimation = "true";
	
	charti.startRadius="30";
	charti.startDuration = 1;
	charti.innerRadius = "30%";
	charti.labelsEnabled = false;
	charti.labelRadius = "-1";
	charti.hideLabelsPercent="3";
	charti.balloonText = "[[title]]: [[percents]]% ($[[value]])";
	
	// LEGEND
	legend = new AmCharts.AmLegend();
	legend.align = "center";
	legend.markerType = "square";
	legend.markerLabelGap = 3;
	legend.markerSize = 10;
	legend.marginTop = 0;
	legend.marginBottom = 0;
	
	legend.position = "right";
	legend.fontSize = 10;
	legend.valueText = "[[percents]]%";
		
	charti.addLegend(legend);
	
	charti.write("chartdivi_fi");
	
	charti.addListener("clickSlice",function(event) 
	{
		charti.pullOutRadius ="20";
	});
});