Bar Charts

Create bar charts using Morris.Bar(options), where options is an object containing the following configuration options.

`element` required	The ID of (or a reference to) the element into which to insert the graph. Note: this element must have a width and height defined in its styling.
`data` required	The data to plot. This is an array of objects, containing x and y attributes as described by the `xkey` and `ykeys` options. Note: the order in which you provide the data is the order in which the bars are displayed. Note 2: if you need to update the plot, use the `setData` method on the object that `Morris.Bar` returns (the same as with line charts).
`xkey` required	A string containing the name of the attribute that contains X labels.
`ykeys` required	A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted).
`labels` required	A list of strings containing labels for the data series to be plotted (corresponding to the values in the `ykeys` option).
`barColors`	Array containing colors for the series bars.
`stacked`	Set to `true` to draw bars stacked vertically.
`hideHover`	Set to `false` to always show a hover legend. Set to `true` or `'auto'` to only show the hover legend when the mouse cursor is over the chart. Set to `'always'` to never show a hover legend.
`hoverCallback`	Provide a function on this option to generate custom hover legends. 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 `data` option. eg: hoverCallback: function (index, options, content, row) { return "sin(" + row.x + ") = " + row.y; }
`axes`	Set to `false` to disable drawing the x and y axes.
`grid`	Set to `false` to disable drawing the horizontal grid lines.
`gridTextColor`	Set the color of the axis labels (default: #888).
`gridTextSize`	Set the point size of the axis labels (default: 12).
`gridTextFamily`	Set the font family of the axis labels (default: sans-serif).
`gridTextWeight`	Set the font weight of the axis labels (default: normal).
`resize`	Set to `true` to enable automatic resizing when the containing element resizes. (default: false). This has a significant performance impact, so is disabled by default.

Live Example

Morris.js Bar Chart Example