2

Im using Stacked area chart of nvd3-angularjs

This is my html

<div ng-controller="Eth2GraphController">

    <nvd3-stacked-area-chart
    data="GraphData"
    noData="No Data For You!"
    id="eth2Graphs"
    showXAxis="true"
    showYAxis="true"
    showLegend="true"
    interactive="true"
    tooltips="true"
    objectEquality="true"
    margin="{left:100,right:100}"
    useInteractiveGuideline="true"
    tooltipcontent="toolTipContentFunction()"
    xAxisTickFormat="xAxisTickFormatFunction()"
    yAxisTickFormat="yAxisTickFormatFunction()"
    color="colorFunction()"
    legendColor="colorFunction()"
    >
        <svg></svg>
    </nvd3-stacked-area-chart>
</div>

Now, I have a function that should format the tooltipcontent, but its not working. Maybe it has something to do with the useInteractiveGuideline attribute. I used the same tooltipcontent function to edit the tooltip of my other charts, its working on those charts the only difference is that those chart dont use useInteractiveGuideline. 

$scope.toolTipContentFunction = function() {
    return function(key, x, y, e, graph) {

        return        '<h3>' + x + '</h3>' + 
                 '<p>' + key + ' ' + y + '</p>';

    }
};

I want x to be in the center, and other formatting for the data. How would I do that? Am I using the correct attribute that would format the tooltip?

user3714598
  • 1,733
  • 5
  • 28
  • 45

1 Answers1

0

  1. Change tooltipcontent="toolTipContentFunction()" to: tooltipContent="toolTipContentFunction"

  2. useInteractiveGuideline must be set to false for the tooltipContent to work. I believe it is because useInteractiveGuideline uses it's own popup.

dwp4ge
  • 1,963
  • 22
  • 27