I'm using NVD3.js to display a multi-line chart.

I would like the yAxis to display to 2 decimal numbers

edited answer

 var chart;

    nv.addGraph(function () {
        chart = nv.models.lineChart()
        .options({
            margin: { left: 140, bottom: 50 },
            x: function (d, i) {
                return i;
            },
            showXAxis: true,
            showYAxis: true,
            transitionDuration: 250,
            tooltips: true,
            tooltipContent: function (key, x, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                       '<p>' + e.point.y + ' at ' + x + '</p>'
            }
        });

        // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
        chart.xAxis
            .axisLabel("Maturity")
            .tickFormat(function(d) { return pivotedData[0].values[d].x; });

        chart.yAxis
            .axisLabel('Model Spread').tickFormat(d3.format(',.2f'));


        d3.select('#chart1 svg')
          .datum(pivotedData)
          .call(chart);

        //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });

But in the tool tip on the lines i would like to display to 12 decimals places.

Is this possible?

I'm using NVD3.js to display a multi-line chart.

I would like the yAxis to display to 2 decimal numbers

edited answer

 var chart;

    nv.addGraph(function () {
        chart = nv.models.lineChart()
        .options({
            margin: { left: 140, bottom: 50 },
            x: function (d, i) {
                return i;
            },
            showXAxis: true,
            showYAxis: true,
            transitionDuration: 250,
            tooltips: true,
            tooltipContent: function (key, x, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                       '<p>' + e.point.y + ' at ' + x + '</p>'
            }
        });

        // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
        chart.xAxis
            .axisLabel("Maturity")
            .tickFormat(function(d) { return pivotedData[0].values[d].x; });

        chart.yAxis
            .axisLabel('Model Spread').tickFormat(d3.format(',.2f'));


        d3.select('#chart1 svg')
          .datum(pivotedData)
          .call(chart);

        //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });

But in the tool tip on the lines i would like to display to 12 decimals places.

Is this possible?

• javascript
• d3.js
• nvd3.js

2 Answers 2

You can set the function that is called to format the contents of a tooltip through .tooltipContent of the chart object. The default function is defined as follows.

tooltip = function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' at ' + x + '</p>'
}

You can format the value of y in there to your liking. Note that y is defined as

yAxis.tickFormat()(lines.y()(e.point, e.pointIndex))

This means that the tick formatting for the axis will affect it, so in order to achieve a higher precision there, you need to get the value directly -- lines can be accessed through chart.lines.

In the nvd3 source they have lines like so (Line Chart):

 interactiveLayer.dispatch.on('elementMousemove', function(e) {
  ...
      var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
      interactiveLayer.tooltip
              .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
              ...
              .valueFormatter(function(d,i) {
                 return yAxis.tickFormat()(d);
              })
              .data(
                  {
                    value: xValue,
                    series: allData
                  }
              )();
...
}

So if you want to override something like tooltip.contentGenerator you are stuck with the data it gives you. I think a good way to do this would be to have a setter for tooltip x formatter or something then it will use that over the axis formatter. Or simply sending over the raw data along with the value and series.

My usecase is that I am showing a timescale of 7 days on the graph I only tick the start of each day. However on the tooltip I want to give a more detailed view of that data.

Here is my pull request specific to the guidelines tooltip

https://github./novus/nvd3/pull/444

Calling: chart.tooltipXAxisFormatter(d3.time.format(toolTipFormat)); will set it.