0👍
In your plunker, I replaced
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
With
</script>
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
(function(angular) {
'use strict';
angular.module('myApp', ['chart.js'])
.controller('myController', [function() {
var ctrl = this;
ctrl.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
ctrl.data = [300, 500, 100];
ctrl.data.label = [300, 500, 100];
ctrl.options = {
legend: {
display: true,
position: "bottom"
},
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
};
}]);
})(window.angular);
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
-->
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="pie" class="chart chart-pie" chart-data="ctrl.data" chart-labels="ctrl.labels" chart-options="ctrl.options">
</canvas>
</body>
- [Chartjs]-Add spaces/margin between bars – Chart.js
- [Chartjs]-Chart.js responsive bar chart label sizing
Source:stackexchange.com