Doughnut and Pie Charts

    They are excellent at showing the relational proportions between data.

    Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their . This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and '50%' for doughnuts.

    They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.

    config setup

    Doughnut and Pie Charts - 图2

    Namespaces:

    • options.datasets.doughnut - options for all doughnut datasets
    • options.datasets.pie - options for all pie datasets
    • options.elements.arc - options for all arc elements
    • options - options for the whole chart

    The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colours of the dataset’s arcs are generally set this way.

    All these values, if undefined, fallback to the scopes described in

    The style of each arc can be controlled with the following properties:

    All these values, if undefined, fallback to the associated elements.arc.* options.

    The following values are supported for borderAlign.

    • 'center' (default)

    If this value is a number, it is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). If this value is an object, the outerStart property defines the outer-start corner’s border radius. Similarly, the outerEnd, innerStart, and innerEnd properties can also be specified.

    The interaction with each arc can be controlled with the following properties:

    All these values, if undefined, fallback to the associated options.

    These are the customisation options specific to Pie & Doughnut charts. These options are looked up on access, and form together with the global chart configuration the options of the chart.

    We can also change these default values for each Doughnut type that is created, this object is available at Chart.overrides.doughnut. Pie charts also have a clone of these defaults available to change at Chart.overrides.pie, with the only difference being cutout being set to 0.

    For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.