JSFiddle - React, Tailwind, and code Playground

by Ashok Mandal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=898"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.ocean.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div  ng-app="HelloApp" ng-controller="MyController">
            <fusioncharts width="200" height="200" type="mscolumn2d" datasource="{{dataSourceWithTheme}}" config="{{chartoptions}}"></fusioncharts>
			<fusioncharts width="200" height="200" type="mscolumn2d" datasource="{{dataSourceWithoutTheme}}" config="{{chartoptions}}"></fusioncharts>
 </div>

JavaScript

(function () {
	var myApp = angular.module('HelloApp', ["ng-fusioncharts"]);
		myApp.controller('MyController', function ($scope) {
			$scope.chartoptions = {
				"dataEmptyMessage" : "No data to display <br> But there is data indeed..."
			};

			var myDataWithTheme = '{"chart":{"exportEnabled":"1","maxLabelWidthPercent":"35","theme":"ocean","useRoundEdges":"0","usePlotGradientColor":"1","plotFillAngle":"180","plotFillRatio":"50,100","labelDisplay":"wrap","labelFontSize":"15","yAxisMinValue":"1","yAxisMaxValue":"5","caption":"My title","decimals":"2","forceDecimals":"1","bgAlpha":"0,0","showBorder":"0","showPercentValues":"1","showAboutMenuItem":"1","aboutMenuItemLabel":"About Openmet","aboutMenuItemLink":"http://www.openmet.com"},"categories":[{"category":[{"label":"My chart"}]}],"dataset":[{"seriesname:":"Total\\n(1886-1886)","data":[{"value":"3.4318243600017","omdata":"182"}]}]}';

			var myDataWithoutTheme = '{"chart":{"exportEnabled":"1","maxLabelWidthPercent":"35","useRoundEdges":"0","usePlotGradientColor":"1","plotFillAngle":"180","plotFillRatio":"50,100","labelDisplay":"wrap","labelFontSize":"15","yAxisMinValue":"1","yAxisMaxValue":"5","caption":"My title","decimals":"2","forceDecimals":"1","bgAlpha":"0,0","showBorder":"0","showPercentValues":"1","showAboutMenuItem":"1","aboutMenuItemLabel":"About Openmet","aboutMenuItemLink":"http://www.openmet.com"},"categories":[{"category":[{"label":"My chart"}]}],"dataset":[{"seriesname:":"Total\\n(1886-1886)","data":[{"value":"3.4318243600017","omdata":"182"}]}]}';

			$scope.dataSourceWithTheme = JSON.parse(myDataWithTheme);
			$scope.dataSourceWithoutTheme = JSON.parse(myDataWithoutTheme);
		});
})();