{"id":7538,"date":"2015-07-26T05:11:52","date_gmt":"2015-07-26T05:11:52","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-to-set-the-domain-and-scale-on-an-axis-on-a-nvd3-js-multibarchart-open-source-projects-novus-nvd3\/"},"modified":"2015-07-26T05:11:52","modified_gmt":"2015-07-26T05:11:52","slug":"how-to-set-the-domain-and-scale-on-an-axis-on-a-nvd3-js-multibarchart-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-to-set-the-domain-and-scale-on-an-axis-on-a-nvd3-js-multibarchart-open-source-projects-novus-nvd3\/","title":{"rendered":"how to set the domain and scale on an axis on a nvd3.js multiBarChart-open source projects novus\/nvd3"},"content":{"rendered":"<p>Based on the above answer, you can do this with numeric x values (not Date objects) as well as a forced X range and specified tickValues&#8230;. for certain types of charts.<\/p>\n<p>Bar charts do not seem to have the capability, however nvd3.lineCharts do what you&#8217;d like. The multiBarChart model does not allow the use of the forceX function to be applied (right now, ever?).<\/p>\n<p>A solution to your problem would be to fill in the 0&#8217;s or to use a sequential chart type (e.g. lineChart)<\/p>\n<pre><code>nv.addGraph(function() {\n  var chart = nv.models.lineChart()\n      .forceX(2001,2011);\n\n  var tickMarks = [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011]\n\n  chart.xAxis\n      .tickValues(tickMarks)\n      .tickFormat(function(d){ return d });\n\n  chart.yAxis\n      .tickFormat(d3.format(',f'));\n\n  var data = [{\n    'key': 'GB by year',\n    'values': [\n      {x: 2001, y: 0.12},\n      {x: 2004, y: 0.03},\n      {x: 2005, y: 0.53},\n      {x: 2006, y: 0.43},\n      {x: 2007, y: 5.5},\n      {x: 2008, y: 9.9},\n      {x: 2009, y: 26.85},\n      {x: 2010, y: 0.03},\n      {x: 2011, y: 0.12}\n    ]\n  }];        \n\n  d3.select('#chart svg')\n    .datum(data)\n    .transition().duration(500).call(chart);\n\n  nv.utils.windowResize(chart1.update);\n\n  return chart;\n});   \n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Based on the above answer, you can do this with numeric x values (not Date objects) as well as a forced X range and specified tickValues&#8230;. for certain types of charts. Bar charts do not seem to have the capability, however nvd3.lineCharts do what you&#8217;d like. The multiBarChart model does not allow the use of [&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-7538","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7538","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=7538"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7538\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}