Skip to content

Latest commit

 

History

History
136 lines (105 loc) · 5.42 KB

doughnut.md

File metadata and controls

136 lines (105 loc) · 5.42 KB
Raw

Doughnut and Pie

Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.

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 cutoutPercentage. This equates what percentage 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.

{% chartjs %} { "type": "doughnut", "data": { "labels": [ "Red", "Blue", "Yellow" ], "datasets": [{ "label": "My First Dataset", "data": [300, 50, 100], "backgroundColor": [ "rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)" ] }] } } {% endchartjs %}

Example Usage

// For a pie chart
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
});
// And for a doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});

Dataset Properties

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.

Name Type Scriptable Indexable Default
backgroundColor Color Yes Yes 'rgba(0, 0, 0, 0.1)'
borderAlign string Yes Yes 'center'
borderColor Color Yes Yes '#fff'
borderWidth number Yes Yes 2
data number[] - - required
hoverBackgroundColor Color Yes Yes undefined
hoverBorderColor Color Yes Yes undefined
hoverBorderWidth number Yes Yes undefined
weight number - - 1

Styling

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

Name Description
backgroundColor arc background color.
borderColor arc border color.
borderWidth arc border width (in pixels).
weight The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.

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

Border Alignment

The following values are supported for borderAlign.

  • 'center' (default)
  • 'inner'

When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap.

Interactions

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

Name Description
hoverBackgroundColor arc background color when hovered.
hoverBorderColor arc border color when hovered.
hoverBorderWidth arc border width when hovered (in pixels).

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

Config Options

These are the customisation options specific to Pie & Doughnut charts. These options are merged with the global chart configuration options, and form the options of the chart.

Name Type Default Description
cutoutPercentage number 50 - for doughnut, 0 - for pie The percentage of the chart that is cut out of the middle.
rotation number -0.5 * Math.PI Starting angle to draw arcs from.
circumference number 2 * Math.PI Sweep to allow arcs to cover.
animation.animateRotate boolean true If true, the chart will animate in with a rotation animation. This property is in the options.animation object.
animation.animateScale boolean false If true, will animate scaling the chart from the center outwards.

Default Options

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

Data Structure

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.

You also need to specify an array of labels so that tooltips appear correctly.

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};