---
title: Shared chart properties
concepts:
  - Basic Concepts
---
<h5>{{title}}</h5>
<p>
  Many times multiple charts are used to tell a more complex story about the
  interrelationship between datasets. Often this means that the charts need to
  share the same visual scale along their axis, even if the supplied data doesn't
  include these data values. d4 allows you to specify specific <code>min</code>
  and <code>max</code> values for each axis, which is demonstrated in the
  following example:
</p>
<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data1 = [
      { x: '2010', y:-50 },
      { x: '2011', y:20 },
    ];
  var data2 = [
      { x: '2010', y:-10 },
      { x: '2011', y:100 },
    ];
  var min = -50;
  var max = 100;
  var chart1 = d4.charts.column();

  chart1
  .width($('#example1').width())
  .y(function(y){
    y.min(min);
    y.max(max);
  });

  var chart2 = d4.charts.column();
  chart2
  .width($('#example2').width())
  .y(function(y){
    y.min(min);
    y.max(max);
  });

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

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

</script>
<div class="clearfix">
  <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>
<h6>JavaScript Code</h6>
<pre><code id="code" class="language-javascript"></code></pre>