Search code examples
chartsnvd3.jssparklines

How to change the display value format from float value to whole number in sparkline chart?


I am using the sparkline chart in one of my project where i am displaying the admin some statistics. My problem is the values which i am providing to the sparkline chart are integer/whole numbers but it is displaying them in float format.

My sparkline configuration is here:

function defaultChartConfig(containerId, data) {

nv.addGraph(function() {

    var chart = nv.models.sparklinePlus()
    chart.margin({left:60})
    .x(function(d,i) { return i })
    .xTickFormat(function(d) {
        //console.log(new Date(data[d].x));
        return d3.time.format('%x')(new Date(data[d].x))
    })
    d3.select(containerId)
    .datum(data)
    .transition().duration(250)
    .call(chart);

    return chart;
});

}

How do i change the X & Y axis value format to display them as integer instead of float?

I did & i am doing research on it from last 2 days but none of the solutions i found worked like expected that forced me to add question here.

Any help would be appreciable. Thanks


Solution

  • I finally found it by doing some random stuff changes

                    .xTickFormat(function (d) {
                    //console.log(new Date(data[d].x));
                    return d3.time.format('%x')(new Date(data[d].x))
                })
                .yTickFormat(function () {
                    return d3.format(',f')
                })
    

    i just added yTickFormat below xTickFormat