JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.5/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="chartConfig" class="span9"></highchart>
</div>
</div>
CSS
.highcharts-container {
margin: auto;
}
JavaScript
'use strict';
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
var dataset = []
var xSet = [];
var json = JSON.parse('[{"_id":"2010","count":1,"docs":[{"name":"dsadsa","_id":"5739e5488438a9c80f289f20"}],"criteria":{"name":"Lorem ipsum dolor sit amet"}},{"_id":"2012","count":1,"docs":[{"name":"ddfssasad Lorem ipsum dolor sit amet","_id":"573a00f28f5b4b68015d58b1"}],"criteria":{"name":"Nunc rutrum velit eu congue tristique"}},{"_id":"2015","count":1,"docs":[{"name":"test","_id":"5739ef27f008d3d40cf66b8a"}],"criteria":{"name":"Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor"}},{"_id":"2016","count":2,"docs":[{"name":"dsaaaa ecli","_id":"5739fce9f008d3d40cf66c06"},{"name":"76575","_id":"573a582e58221b601af64873"}],"criteria":{"name":"Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor"}}]');
json.forEach(function(e, i) {
xSet.push(e.criteria.name)
dataset.push(e.count);
});
$scope.chartConfig = {
options: {
chart: {
type: 'column'
},
tooltip: {
style: {
padding: 10,
fontWeight: 'bold'
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: xSet
},
yAxis: {
allowDecimals: false,
title: {
text: 'Count'
}
},
series: [{
data: dataset
}],
title: {
text: ''
},
loading: false,
size: {
// width: '800',
// height: 250
},
func: function(chart) {
console.log(chart)
}
};
});