---
layout: default
morris_version: 0.5.1
---
<div class="row">
  <div class="span12">


    <h1>Bar Charts</h1>


    <hr>


    <h2 id="bars">Bar Charts</h2>
    <p>
      Create bar charts using <code>Morris.Bar(<em>options</em>)</code>,
      where options is an object containing the following configuration
      options.
    </p>
    <table class="table table-striped table-bordered">
      <tbody>
        <tr>
          <td><code>element</code><br><b>required</b></td>
          <td>
            The ID of (or a reference to) the element into which to insert the graph.
            <br>
            <em>Note: this element must have a width and height defined in its styling.</em>
          </td>
        </tr>
        <tr>
          <td><code>data</code><br><b>required</b></td>
          <td>
            The data to plot.  This is an array of objects, containing
            x and y attributes as described by the <code>xkey</code>
            and <code>ykeys</code> options.
            <br>
            <em>
              Note: the order in which you provide the data is the order in
              which the bars are displayed.
            </em>
            <br>
            <em>
              Note 2: if you need to update the plot, use the <code>setData</code>
              method on the object that <code>Morris.Bar</code> returns (the
              same as with line charts).
            </em>
          </td>
        </tr>
        <tr>
          <td><code>xkey</code><br><b>required</b></td>
          <td>
            A string containing the name of the attribute that contains
            X labels.
          </td>
        </tr>
        <tr>
          <td><code>ykeys</code><br><b>required</b></td>
          <td>
            A list of strings containing names of attributes that
            contain Y values (one for each series of data to be
            plotted).
          </td>
        </tr>
        <tr>
          <td><code>labels</code><br><b>required</b></td>
          <td>
            A list of strings containing labels for the data series
            to be plotted (corresponding to the values in the
            <code>ykeys</code> option).
          </td>
        </tr>
        <tr>
          <td><code>barColors</code></td>
          <td>
            Array containing colors for the series bars.
          </td>
        </tr>
        <tr>
          <td><code>stacked</code></td>
          <td>
            Set to <code>true</code> to draw bars stacked vertically.
          </td>
        </tr>
        <tr>
          <td><code>hideHover</code></td>
          <td>
            Set to <code>false</code> to always show a hover legend.
            <br>
            Set to <code>true</code> or <code>'auto'</code> to only show the
            hover legend when the mouse cursor is over the chart.
            <br>
            Set to <code>'always'</code> to never show a hover legend.
          </td>
        </tr>
        <tr>
          <td><code>hoverCallback</code></td>
          <td>
            Provide a function on this option to generate custom
            hover legends.
            <br>
            The function will be called with the index of the row under
            the hover legend, the options object passed to the constructor
            as arguments, a string containing the default generated hover legend
            content HTML, and an object containing the original data for the
            row as passed in the <code>data</code> option.
            <br>
            <em>eg:</em>
            <pre>hoverCallback: function (index, options, content, row) {
  return "sin(" + row.x + ") = " + row.y;
}</pre>
          </td>
        </tr>
        <tr>
          <td><code>axes</code></td>
          <td>
            Set to <code>false</code> to disable drawing the x and
            y axes.
          </td>
        </tr>
        <tr>
          <td><code>grid</code></td>
          <td>
            Set to <code>false</code> to disable drawing the horizontal
            grid lines.
          </td>
        </tr>
        <tr>
          <td><code>gridTextColor</code></td>
          <td>
            Set the color of the axis labels (default: #888).
          </td>
        </tr>
        <tr>
          <td><code>gridTextSize</code></td>
          <td>
            Set the point size of the axis labels (default: 12).
          </td>
        </tr>
        <tr>
          <td><code>gridTextFamily</code></td>
          <td>
            Set the font family of the axis labels (default: sans-serif).
          </td>
        </tr>
        <tr>
          <td><code>gridTextWeight</code></td>
          <td>
            Set the font weight of the axis labels (default: normal).
          </td>
        </tr>
        <tr>
          <td><code>resize</code></td>
          <td>
            Set to <code>true</code> to enable automatic resizing when the
            containing element resizes. (default: false).
            <br>
            This has a significant performance impact, so is disabled by
            default.
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <h3>Live Example</h3>
      <a class="jsbin-embed" href="http://jsbin.com/uzosiq/258/embed?javascript,live">Morris.js Bar Chart Example</a>
    </div>
  </div>
</div>