d3.js: tickformat – adding a % sign without multiplying by 100

Update for D3 v4 (using ES6):

// Can also be axisTop, axisRight, or axisBottom
d3.axisLeft()
    .tickFormat(d => d + "%")

Original answer for D3 v3:

You can create your own format:

d3.svg.axis()
    .tickFormat(function(d) { return d + "%"; });

If you want to get rid of the decimal places:

d3.svg.axis()
    .tickFormat(function(d) { return parseInt(d, 10) + "%"; });

Leave a Comment