This really couldn't be easier. Create a Donut chart using
Morris.Donut(options)
, with the following
options.
data required |
The data to plot. This is an array of objects, containing
label and value attributes
corresponding to the labels and sizes of the segments of the
donut chart.
Note: by default, the segment with the greatest value will be initially selected. You can change the selection using the select(index) method on
the object returned by Morris.Donut .
Note 2: as for line charts, if you need to update the plot, use the setData method on the object that
Morris.Donut returns.
|
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. |
colors |
An array of strings containing HTML-style hex colors for each of the donut segments. Note: if there are fewer colors than segments, the colors will cycle back to the start of the array when exhausted. |
formatter |
A function that will translate a y-value into a label for
the centre of the donut.
eg: currency function (y, data) { return '$' + y }
Note: if required, the method is also passed an optional second argument, which is the complete data row for the given value. |
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. |