---
title: Basic Column Chart
charts:
  - Column Chart
---
<h5>{{title}}</h5>
<p>
  The following demonstrates the most basic example of the column chart. This
  chart uses the default settings from d4.
</p>
<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data = [
      { x: '2010', y:-10 },
      { x: '2011', y:20 },
      { x: '2012', y:30 },
      { x: '2013', y:40 },
      { x: '2014', y:50 },
    ];
  var chart = d4.charts.column();
  d3.select('#example')
  .datum(data)
  .call(chart);
});

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