d3.jsnvd3.jsangularjs-nvd3-directives

D3 bar chart yaxis scaling issue, I don't want decimal/duplicate values


I have implemented D3 chart using NVD3 library below is the link for the reference. Is there a way that I can stop this automatic scaling or get rid of this decimal values. http://nvd3.org/livecode/index.html#codemirrorNav

enter image description here

enter image description here


Solution

  • Finally I got solution for this issue, problem happens when we have small set of data in which sometimes we get decimal values and when we format for integer values it duplicates the data on Y-axis. Have a look to this plunker:

    http://plnkr.co/edit/yFyShQ?p=preview

    To make it dynamic you can pass min and max value to

    d3.range(minValue, maxValue)
    

    Like this

    const minValue = d3.min(data, d => d.Value);
    const maxValue = d3.max(data, d => d.Value);
    const tickValues = d3.range(minValue > 0 ? 0 : minValue,maxValue);
    return maxValue < 10 ? tickValues: null;