Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 683
Mars J Avatar asked Jun 06 '12 17:06

Mars J


People also ask

What are tick marks on a graph?

A tick is a short line on an axis. For category axes, ticks separate each category. For value axes, ticks mark the major divisions and show the exact point on an axis that the axis label defines. Ticks are always the same color and line style as the axis.

What is ticks in D3 JS?

The ticks() function in D3. js is used to form an array of between a given range of start and stop both inclusive such that each element is uniformly and equally spaced.

What are axis tick labels?

The tick labels are the labels that you see next to each tick mark. The tick values are the locations along the x-axis where the tick marks appear. Set the values using the xticks function. Set the corresponding labels using the xticklabels function.


2 Answers

You can hide the tick format like so:

myGraph.yAxis.tickFormat(function (d) { return ''; });
like image 133
Thomas Coats Avatar answered Oct 04 '22 19:10

Thomas Coats


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!

like image 7
paxRoman Avatar answered Oct 04 '22 18:10

paxRoman