I am currently utilizing the nvd3-bullet-chart from the angularjs-nvd3-directives library to showcase maximum and current data. It functions properly when my minimum number is greater than 2, displaying whole numbers. However, if my maximum number is set to 1, it displays decimal numbers instead. How can I eliminate these decimal numbers? Any assistance on this matter would be greatly appreciated. Thank you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'bulletChart',
transitionDuration: 500,
height: 70,
margin: {
top: 10,
right: 10,
bottom: 30,
left: 125
}
},
title: {
enable: true,
text: 'Title for Line Chart',
css: {
'text-align': 'center',
'font-size': '12px'
}
}
};
$scope.dataset = {
data: {
"title": "Revenue",
"subtitle": "US$, in thousands",
"ranges": [1],
"measures": [0],
"markers": [0]
},
data2: {
"title": "Revenue",
"subtitle": "US$, in thousands",
"ranges": [150, 225, 300],
"measures": [220],
"markers": [250]
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat="data in dataset">
<nvd3 options="options" data="data"></nvd3>
</div>
<br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>
Check out the plunker link here to view row 1.