title: d3 - how to format date on x-axis
body: <p>Super new to d3, and I apologize if this question is poorly worded.</p>
  <p>I'm attempting to alter pre-existing code and reformat the dates that appear on the x-axis of my chart. Currently, my x-axis is showing a tick for each month, and the month is not abbreviated, e.g. <em>January</em>, <em>February</em>, etc.</p>
  <p>For space-constraint reasons, I need to abbreviate these months, e.g. <em>Jan</em>, <em>Feb</em>, etc.</p>
  <p>This is the code that creates the x-axis:</p>
  <pre><code>   master.append(&quot;g&quot;)
        .attr(&quot;class&quot;, &quot;x axis&quot;)
        .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
        .call(d3axis.axisBottom()
          .scale(x));
  </code></pre>
  <p>I believe that I need to chain a function to the <code>axisBottom</code> call. I have been looking at <code>tickFormat</code> and <code>timeFormat</code> in the docs, and also at <a href="https://bl.ocks.org/d3noob/0e276dc70bb9184727ee47d6dd06e915" rel="nofollow noreferrer">this</a> example. I'm trying to do something like:</p>
  <pre><code>    master.append(&quot;g&quot;)
        .attr(&quot;class&quot;, &quot;x axis&quot;)
        .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
        .call(d3axis.axisBottom()
          .tickFormat(d3axis.timeFormat(&quot;%m&quot;))
          .scale(x));
  </code></pre>
  <p>but I get this error: <em>npmD3Axis.default.timeFormat is not a function</em></p>
  <p>Can anyone point me in the right direction?
  Thanks!</p>