title: d3js axis dates start and end value only
body: <p><strong>Resolved:</strong></p>
  
  <p>Thanks, the tickValues gave me the wanted result. I used the values from d3.min and d3.max:</p>
  
  <p><img src="https://i.stack.imgur.com/gJNyj.png" alt="Result"></p>
  
  <pre><code>    var xMin = d3.min(groups, function(c) { return d3.min(c.values, function(v) { return v.date; }); });
      var xMax = d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); });
  
      x.domain([xMin,xMax]);
  
          var xAxis = d3.svg.axis()
              .scale(x)
              .tickFormat(d3.time.format('%y-%m-%d'))
              .orient("bottom")
              .tickValues([xMin, xMax]);
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>So I have a D3js multi-series line chart.</p>
  
  <p><img src="https://i.stack.imgur.com/dD4DQ.png" alt="Chart"></p>
  
  <p>The X axis is bottom and is time (the range of this depends on the user selection, can be few days, weeks, months or years even).
  The Y axis is value and is decimal.</p>
  
  <p>What I have problem with is that the labels on the axis is overlapping and it's looking rather poorly.</p>
  
  <p>So my question is if there is a way to show only the first date on the axis and the last date?</p>
  
  <p>I have based the chart on this one:
  <a href="http://bl.ocks.org/3884955" rel="noreferrer">http://bl.ocks.org/3884955</a></p>
  
  <p>My code for x-axis:</p>
  
  <pre><code>    var x = d3.time.scale().range([0, dimensions.width]);
  
      x.domain([
          d3.min(groups, function (c) { return d3.min(c.values, function (v) { return v.date; }); }),
          d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); })
      ]);
  
          var xAxis = d3.svg.axis()
              .scale(x)
              .tickFormat(d3.time.format('%a %d'))
              .orient("bottom")
              .ticks(5);
  
          svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + dimensions.height + ")")
              .call(xAxis);
  </code></pre>