Donut Charts


Donut Charts

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.

Live Example

Morris.js Donut Chart Example