CODEWITHSUNDEEP
javascriptd3.js
Mars J
Mars J

Reputation: 922

Hide Tick Labels in D3 on Line Graph

I am new to D3 and just had a quick question about tick labels on line graphs made with D3. I am using d3.svg.axis.scale().tickSize().tickSubdivide() to generate my tick marks.

Is there a way to hide them or to change their value? For example, I have a line graph where the tick labels are the intervals (1, 2, 3, etc) and I'd like to change them to strings like ('Jan', 'Feb', 'Mar', 'Apr', etc). Is that possible?

Thanks!

Upvotes: 18

Views: 13114

Answers (2)

Thomas Coats
Thomas Coats

Reputation: 632

You can hide the tick format like so:

myGraph.yAxis.tickFormat(function (d) { return ''; });

Upvotes: 24

paxRoman
paxRoman

Reputation: 2062

Yes, it is possible to generate different formats for your ticks. You can find some details here: https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat . Unfortunately not all formats are currently documented, so you may want to take a look at the d3 code for that method. If you have both xAxis and yAxis you can do something like:

myGraph.yAxis.tickFormat(d3.format(',.2%'));

Also have a look at Bob Monteverde's charting library: https://github.com/novus/nvd3 (especially in the sources folder, at the axis components), if you want to see lots of tricks related to axis components and axis tick formatting.

If on the other hand you don't want the ticks displayed, then I guess you can create an axis component without ticks (I did not try this, tough), but I don't see the point in doing that when you have custom formatters and you can do virtually anything you want with the ticks.

Best regards!

Upvotes: 7

Related Questions