AngularJs nvD3 LineChart width a different list of values instead of yAxis

Question

I am trying to get different values in a LineChart tooltip instead of the values in the yAsis. Background is to display large numbers > 100.000 in a shortened version like '100T' on yAxis. Opening the tooltip, it is recommended to see the correct value from this dot and not the shortened value from the yAxis.

Screenshot:

Is it possible to realize this? Regards Tim

Answer 1

So, this is my solution:

chart.interactiveLayer: {
tooltip: {
    contentGenerator: function(d) {
        var html = '<div class="ods-tooltip-content">';
        html += '<h4 style="">' + d.value + '</h4>';
        d.series.forEach(function(elem){
            html += '<div class="ods-tooltip-row">';
                html += '<div class="ods-tooltip-colorlabel" style="background-color: ' + elem.color  + '"></div>'
                html += '<div class="ods-tooltip-key">' + elem.key + '</div>';
                html += '<div class="ods-tooltip-value">' + DE.numberFormat("01,.2f")(elem.value) + '</div>';
            html += '</div>';
        });
        html += '</div>';
        return html;

        // return d.series[0].key + ' ' + d.series[0].value;




    }
}

}

And this is the CSS for these example:

#widget .ods-tooltip-content {
 padding: 0 10px 15px 10px;
}

#widget .ods-tooltip-content h4 {
 text-align: left;
}

#widget .ods-tooltip-content .ods-tooltip-row {
 margin: 0 0 5px 0;
}

#widget .ods-tooltip-content .ods-tooltip-row:last-child {
 margin: 0;
}

#widget .ods-tooltip-content .ods-tooltip-row > div {
 display: inline-block;
 box-sizing: border-box;
 vertical-align: middle;
 line-height: 17px;
}

#widget .ods-tooltip-content .ods-tooltip-row .ods-tooltip-colorlabel {
 border: 1px solid #333;
 width: 15px;
 height: 15px;
}

#widget .ods-tooltip-content .ods-tooltip-row  .ods-tooltip-key,
#widget .ods-tooltip-content .ods-tooltip-row .ods-tooltip-value {
 margin: 0 0 0 10px;
}

#widget .ods-tooltip-content .ods-tooltip-row .ods-tooltip-value {
 font-weight: bold;
}