JSFiddle - React, Tailwind, and code Playground
by Sajeetharan Sinnathurai
HTML
<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<div ng-app="myapp">
<div ng-controller="myctrl">
<div class="row">
<highchart id="chart1" config="chartConfig" class="span10"></highchart>
</div>
</div>
JavaScript
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
$scope.chartConfig = {
options: {
chart: {
type: "bar",
pointPlacement: "on",
clip: false,
}
},
xAxis: {
type: "category",
title: {
text: "country"
}
},
series: [{
name: "avg_orderqty",
color: "#3b6982",
data: [{
name: "Afghanistan",
y: 66.48275862068965
}, {
name: "Aland Islands",
y: 49
}, {
name: "Albania",
y: 49.42424242424242
}, {
name: "American Samoa",
y: 99
}, {
name: "Angola",
y: 57.8
}, {
name: "Anguilla",
y: 59
}, {
name: "Argentina",
y: 47.33734939759036
}, {
name: "Armenia",
y: 56.035714285714285
}, {
name: "Australia",
y: 64.75
}, {
name: "Austria",
y: 44.75
}, {
name: "Azerbaijan",
y: 51.888888888888886
}, {
name: "Bahamas",
y: 29.333333333333332
}, {
name: "Bangladesh",
y: 65.5
}, {
name: "Barbados",
y: 93
}, {
name: "Belarus",
y: 54.375
}, {
name: "Belgium",
y: 82
}, {
name: "Belize",
y: 76
}, {
name: "Benin",
y: 47
}, {
name: "Bermuda",
y: 59
}, {
name: "Bhutan",
y: 56.2
}, {
name: "Bolivia",
y: 50.75
}, {
name: "Bonaire, Saint Eustatius and Saba ",
y: 62
}, {
name: "Bosnia and Herzegovina",
y: 59.333333333333336
}, {
name: "Botswana",
y: 50.42857142857143
}, {
name: "Brazil",
y: 51.21495327102804
}, {
name: "Bulgaria",
y: 49.03225806451613
}, {
name: "Burkina Faso",
...