CODEWITHSUNDEEP
d3.jsnvd3.js
ramses
ramses

Reputation: 313

Howto set custom ticks and labels on Y axis in nvd3

I'd like to set custom tick number and labels for my discrete chart done in nvd3. The problem is that labels and values needs to be shown in ratios like 10:1, 8:1 etc. but actual bar height shown as numbers 10, 8 etc. Is there any way to create custom labels on y axis and on mouse over tool-tips in nvd3?

Upvotes: 0

Views: 2949

Answers (1)

Lucas
Lucas

Reputation: 1389

You can do this using tickFormat (which is actually a raw D3 method):

chart.yAxis
    .tickFormat(function (d) {
        return  d + ':' + 1;
    });

NVD3 will automatically use that format in the tooltip.

If you wanted to edit the tooltip content separately you could use the tooltipContent method (other methods will likely be added in the next release of NVD3).

chart.tooltipContent(function (key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
        '<p>' +  y + ' on ' + x + '</p>';
});

See this Plunker.

Upvotes: 3

Related Questions