Tooltip not working on second line in NVD3 MultiChart

Question

I have a multiChart in angular-nvd3, which should display sales count and total income for each day.

<nvd3 options="options" data="data"></nvd3>

And here's the options and data:

$scope.options = {
    chart: {
        type: 'multiChart',
        height: 450,
        margin : {
            top: 30,
            right: 90,
            bottom: 50,
            left: 70
        },
        color: d3.scale.category10().range(),
        useInteractiveGuideline: true,
        xAxis: {
            axisLabel: "Day",
            tickFormat: function(d){
                return d3.time.format('%b %d')(new Date(d));;
            }
        },
        yAxis1: {
            axisLabel: "Orders",
            tickFormat: d3.format('d')
        },
        yAxis2: {
            axisLabel: "Income (Lari)",
            tickFormat: function(d){
                return Math.round(d / 100) + " GEL";
            }
        }
    }
};
$scope.data = [{
    yAxis: 2,
    type: 'line',
    key: "Income",
    values: data.map(function (item) {
        return {
            series: 0,
            x: new Date(item._id.year, item._id.month, item._id.day),
            y: item.total
        };
    })
},
{
    yAxis: 1,
    key: "Orders",
    type: 'line',
    values: data.map(function (item) {
        return {
            series: 1,
            x: new Date(item._id.year, item._id.month, item._id.day),
            y: item.count
        };
    })
}];

Data item before transforming:

{
  "_id": {
    "year": 2015,
    "month": 11,
    "day": 26
  },
  "total": 1078,
  "count": 1
},

Hovering the first line shows tooltip, displaying the Y value, but the second line is completely ignored on mouseover. Disabling the first line shows following error in console:

d3.js:5948 Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"
d3.transform @ d3.js:5948d3
interpolateTransform @ d3.js:6049
(anonymous function) @ d3.js:8754
(anonymous function) @ d3.js:8945
d3_class.forEach @ d3.js:341
start @ d3.js:8944
schedule @ d3.js:8912
d3_timer_mark @ d3.js:2165
d3_timer_step @ d3.js:2146

And causes the window to overflow horizontally, which is because tooltip is shown with a huge offset. Can be observed when zooming out extremely.

score 0 · Answer 1 · answered Feb 27 '16 at 05:53

I was unable to reproduce your issue exactly in a plunker, but I took your example data object and created a couple additional datapoints in a plunker of my own. The tooltip functionality is working fine in this plunker, and I think it must have to do with how you are mapping the values into the $scope.data object.

I took the approach of creating an external function to build the values into the $scope.data array:

function mapValues(src, dest, series, key) {
    dest[series].values = src.map(function(item) {
        return {
            series: series,
            x: new Date(item._id.year, item._id.month, item._id.day),
            y: item[key]
        };
    })
}

And then called the function with the parameters you specified:

$scope.data = [{
    yAxis: 2,
    type: 'line',
    key: "Income"
},
{
    yAxis: 1,
    key: "Orders",
    type: 'line'
}];

mapValues(json, $scope.data, 0, 'total');
mapValues(json, $scope.data, 1, 'count');

Anyway, may be too late to help you now, but just thought I'd offer this way of creating your data object to someone else who might run into this issue.

Tooltip not working on second line in NVD3 MultiChart

1 Answers1