Fork me on GitHub

Example

            
    <div id='chart_bar'></div>
    <script>
      Morris.Bar({
        element: 'chart_bar',
        data: [
          { team: 'Brazil', nb: 5 },
          { team: 'Italy', nb: 4 },
          { team: 'Germany', nb: 4 },
          { team: 'Uruguay', nb: 2 },
          { team: 'Argentina', nb: 2 }
        ],
        xkey: 'team',
        ykeys: ['nb'],
        labels: ['Editions Wins']
      });
    </script>
            
          

Configuration

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 false to disable automatic resizing when the containing element resizes. (default: true).
horizontal Set to true to display the bar chart horizontally (default: false).
animate
new v0.6
Set to false to disable chart animation (default: true).
dataLabels
new v0.6
Set to true to display values of bar charts (default: false).

Appearance of label can be customized through properties dataLabelsFamily, dataLabelsSize, dataLabelsWeight and dataLabelsColor.
dataLabelsPosition
new v0.6
Set to inside to display values inside donut/pie's segments (default: outside).
nbYkeys2
new v0.6
This to set which how many ykeys would be displayed as line on the right Y-axis, from the end of ykeys array (default: 0).
showZero
new v0.6
Set to false to do not display a thin line when values equal to 0 (default: true).