Friday, September 29, 2017

How to customize tooltip on mouse hover of a polar area chart of Angular Charts

I have a polar area chart built with Angular Chart, as it follows:

Polar area chart

I need to customize what’s written in the tooltip mouse hover (Right now it shows [label: value], or [MBA010: 98.69], as in the image), or remove that option completely.

I have tried applying the options as shown in this plunker, supplied by a similar question:

// Controller
$scope.chart_options = {
  tooltipTemplate: function(label) {
    return label.label + ':' + label.value;
  }
};

<!-- View -->
<canvas class="chart chart-polar-area" 
               chart-data="module.data" 
               chart-labels="module.labels" 
               chart-options="chart_options"></canvas>

But these options don’t work on the polar area chart, although it works on all the other chart types.

How can I customize, or remove, tooltips on mouse hover for this particular chart?

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/09/29/how-to-customize-tooltip-on-mouse-hover-of-a-polar-area-chart-of-angular-charts/
via @lzomedia #developer #freelance #web #lzomedia.com

No comments:

Post a Comment