Fork me on GitHub

Example

            
    <div id='chart_donut'></div>
    <script>
      Morris.Donut({
        element: 'chart_donut',
        data: [
          { label: 'Africa', value: 5 },
          { label: 'Asia', value: 5 },
          { label: 'Europe', value: 14 },
          { label: 'North America', value: 3 },
          { label: 'South America', value: 5 }
        ]
      });
    </script>

Configuration

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 false to enable automatic resizing when the containing element resizes. (default: true).
donutType
new v0.6		 Set to pie to display the chart as a pie chart instead of donut. (default: donut).
animate
new v0.6		 Set to false to disable chart animation. (default: true).
dataLabels
new v0.6		 Set to true to display values close to donut/pie's segments. (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).
showPercentage
new v0.6		 Set to true to display percentage instead of values (default: false).