{"id":7534,"date":"2015-07-26T05:11:32","date_gmt":"2015-07-26T05:11:32","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-can-i-position-rotated-x-axis-labels-on-column-chart-using-nvd3-open-source-projects-novus-nvd3\/"},"modified":"2015-07-26T05:11:32","modified_gmt":"2015-07-26T05:11:32","slug":"how-can-i-position-rotated-x-axis-labels-on-column-chart-using-nvd3-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-can-i-position-rotated-x-axis-labels-on-column-chart-using-nvd3-open-source-projects-novus-nvd3\/","title":{"rendered":"How can I position rotated x-axis labels on column chart using nvd3?-open source projects novus\/nvd3"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/12e39f7c4cfdc4a96d2e64988b07a8c5?s=128&amp;d=identicon&amp;r=PG\" \/> <strong>River<\/strong><\/p>\n<p>The best way I have found to handle this is to perform the rotation of the x-axis tick labels yourself. Why? Because NVD3 is not handling the rotation and associated translations properly. Look at your image, and you&#8217;ll see that the library allows the rotation to translate the labels out from directly under the columns they represent. It also begins to mishandle the <code>axis.tickPadding()<\/code> values, and so on.<\/p>\n<p>The first thing that you need to do is to ensure that the chart has enough space for the translated labels, like so:<\/p>\n<pre><code>chart.margin({bottom: 60});\n<\/code><\/pre>\n<p>We can then translate and rotate the labels:<\/p>\n<pre><code>var xTicks = d3.select('.nv-x.nv-axis &gt; g').selectAll('g');\nxTicks\n  .selectAll('text')\n  .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;\n<\/code><\/pre>\n<p>The labels now look like this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/iiis4.png\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>River The best way I have found to handle this is to perform the rotation of the x-axis tick labels yourself. Why? Because NVD3 is not handling the rotation and associated translations properly. Look at your image, and you&#8217;ll see that the library allows the rotation to translate the labels out from directly under the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7534","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7534"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7534\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}