I'm trying to display graph information without the need for the user to hover over some piece of chart. I'm using Chart.js with Angular.js!
My question is also the one of the user @DiegoAugusto this question here
html snippet:
<div class="wrapper-chart" >
<canvas
id="pie"
class="chart chart-pie"
chart-data="data"
chart-labels="labels"
chart-options="options"
chart-colors="colors"
legend = "true"
chart-series="series">
</canvas>
</div>
Angled Excerpt :
angular
.module('myBeeApp.controllers')
.controller('chartHome', chartHome);
chartHome.$inject = [
'$scope'
];
function chartHome(
$scope
){
$scope.labels = ["Primavera", "Verão", "Outono", "Inverno"];
$scope.data = [32, 53, 14, 79];
$scope.options = {
showToolTips: true,
tooltipEvents: [],
onAnimationComplete: function() {
this.showTootip(this.datasets[0].bars,true);
},
title: {
display: true,
text: 'Quantidade por Estação',
fontColor: '#ff8c1b',
fontFamily: 'HelveticaNeue',
fontSize: 26,
},
legend: {
display: true
},
cutoutPercentage: 50,
};
$scope.colors = ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"];
}
The graph is being generated correctly, but the information is not displayed in it.
The generated graph:
HowIwouldlikeittostay(withthehighlightedinformation):
Ihavetriedthiscodesnippetanddidnotwork:
$scope.options={tooltipEvents:[],showTooltips:true,tooltipCaretSize:0,onAnimationComplete:function(){this.showTooltip(this.segments,true);},};
Anothersourcethattriedtofollowwhattheysaidthere this was and I did not succeed! Please, if anyone knows how to manipulate, help!
Version: angular - v1.6.6 ; angular-chart - v1.1.1 ; chart.js - v2.7.1