---
title: Staggered Data Labels
features:
  - Axis
  - Column Labels
---
<h5>{{title}}</h5>
<p>
  Sometimes large data series labels visually run together, which makes the chart
  hard to understand. By default d4 will try to stagger both the data series labels
  and the axis labels. You can disable this feature by setting
  <code>stagger(false)</code>.
</p>
<div class="alert alert-warning">Obviously none of these charts are partially
  nice to look at. d4's <code>stagger</code> is an attempt to make the best
  of a bad visual situation. Ideally these kinds of situations can be avoided by
  giving charts enough visual space to breath.
</div>
<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data = [
      { x: '2008', y:100 },
      { x: '2009', y:110 },
      { x: '2010', y:100 },
      { x: '2011', y:200 },
      { x: '2012', y:300 },
      { x: '2013', y:300 },
      { x: '2014', y:300 },
    ];
  var margin = {
      top: 40,
      right: 60,
      bottom: 40,
      left: 60
    };

  var chart1 = d4.charts.column();
  chart1
    .margin(margin)
    .height(160)
    .width(260);

  d3.select('#example1')
    .datum(data)
    .call(chart1);

  // disable staggering for the second chart
  var chart2 = d4.charts.column();
  chart2
    .margin(margin)
    .using('barLabels', function(labels) {
      labels.stagger(false);
    })
    .using('xAxis', function(xAxis){
      xAxis.stagger(false);
    })
    .using('yAxis', function(yAxis){
      yAxis.stagger(false);
    })
    .height(160)
    .width(260);

  d3.select('#example2')
    .datum(data)
    .call(chart2);

  var chart3 = d4.charts.row();
  chart3
    .x(function(x){
      x.key('y');
    })
    .y(function(y){
      y.key('x');
    })
    .valueKey('y')
    .margin(margin)
    .height(160)
    .width(300);

  d3.select('#example3')
    .datum(data)
    .call(chart3);

  // disable staggering for the second chart
  var chart4 = d4.charts.row();
  chart4
    .x(function(x){
      x.key('y');
    })
    .y(function(y){
      y.key('x');
    })
    .valueKey('y')
    .margin(margin)
    .using('barLabels', function(labels) {
      labels.stagger(false);
    })
    .using('xAxis', function(xAxis){
      xAxis.stagger(false);
    })
    .using('yAxis', function(yAxis){
      yAxis.stagger(false);
    })
    .height(160)
    .width(300);

  d3.select('#example4')
    .datum(data)
    .call(chart4);

});

</script>
<div class="clearfix">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6">
      <h5>Staggered (default)</h5>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6">
      <h5>Staggered disabled</h5>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6" id="example1"></div>
    <div class="col-xs-6 col-sm-6 col-md-6" id="example2"></div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6" id="example3"></div>
    <div class="col-xs-6 col-sm-6 col-md-6" id="example4"></div>
  </div>

</div>
<h6>JavaScript Code</h6>
<pre><code id="code" class="language-javascript"></code></pre>