Question

196

Display y-axis as percentages?

rated 0 times [ 200] [ 4] / answers: 1 / hits: 23459 / 12 Years ago, wed, april 18, 2012, 12:00:00

I'm making a chart, and I want my y-axis tick labels to display as percentages (instead of decimals). How can I do this?

My current code looks something like

yAxis

  .append(text)

  .attr(class, ticklabel)

  .attr(x, 0)

  .attr(y, y)

  .attr(dy, .5em)

  .attr(text-anchor, middle)

  .text(y.tickFormat(5))

  .attr(font-size, 10px)

I noticed that d3 has a format specifier, but I'm not sure how to use these in conjunction with tickFormat.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isaacvalentinn

Add To Favorites

Follow

Total Points: 325

Total Questions: 120

Total Answers: 131

Location: North Korea

Member since Tue, Jun 16, 2020

4 Years ago

isaacvalentinn questions

1 BrowserAuthError: interaction_in_progress - Unable to fix, regardles of solutions found

Tue, Aug 10, 21, 00:00, 3 Years ago

1 How to transform a Luxon DateTme object to a date

Mon, Jan 18, 21, 00:00, 3 Years ago

1 __dirname is not defined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 How to get status code in angular observable

Wed, Sep 23, 20, 00:00, 4 Years ago

1 running node with loader ts-node/esm.js requires imports to have the .js extension

Wed, Sep 9, 20, 00:00, 4 Years ago

View All

answered 12 Years ago clifford · Accepted Answer

It looks like you authoring the axis by hand. I recommend using the d3.svg.axis component instead, which does the rendering for you. For example:

http://bl.ocks.org/1166403

If you want to format ticks as percentages, then use d3.format's % directive:

var formatPercent = d3.format(.0%);



var yAxis = d3.svg.axis()

    .scale(y)

    .orient(left)

    .tickFormat(formatPercent);

You can instead use the p directive if you want to round to the percentage to significant digits.

To answer your question more directly, you use d3.format instead of the scale's tickFormat. Scales provide a default tickFormat for convenience, but if you want different behavior, then you use a custom d3.format rather than the scale's default one.