CODEWITHSUNDEEP
javascriptangularjsnvd3.jsangular-nvd3
Eric Hartford
Eric Hartford

Reputation: 18012

How do I add a custom tooltip to angular-nvd3 multibar chart?

I cannot get this to work in a multibar chart

$scope.countsChart.options = {
  deepWatchData: false,
  chart: {
    type: 'multiBarChart',
    margin: {
      top: 20,
      right: 20,
      bottom: 45,
      left: 45
    },
    clipEdge: true,
    duration: 500,
    stacked: true,
    showControls: false,
    xAxis: {
      showMaxMin: false,
      tickFormat: d => $scope.countsChart.selectedGranularity().tickFormat(d)
    },
    yAxis: {
      axisLabelDistance: -20,
      tickFormat: d => parseInt(d).toLocaleString()
    },
    useInteractiveGuideline: false,
    interactive: true,
    tooltips: true,
    tooltipContent: (key, x, y, e, graph) => '<h1>Test</h1>'
  }
};

Instead of my custom tooltip, the default tooltip still shows.

image

Anybody have success making a custom tooltip?

Upvotes: 1

Views: 3758

Answers (1)

Bennett Adams
Bennett Adams

Reputation: 1818

You'll want to use the chart.tooltip.contentGenerator method (ES6 equivalent to what I mocked in this plunker):

$scope.countsChart.options = {
  chart: {
    ...,
    tooltip: {
      contentGenerator: function (key, x, y, e, graph) { 
        return '<h1>Test</h1>';
      }
   // or if you're writing ES6:
   // contentGenerator: (key, x, y, e, graph) => '<h1>Test</h1>'; 
    }
  }
}

Upvotes: 6

Related Questions