<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>
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:
|
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 ).
|