Doughnut and Pie Charts

Reference

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 cutout. 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.

DoughnutPie

@(Html.Chart("canvasId")
.Data(d => d
    .Labels("Red", "Blue", "Yellow")
    .Datasets(ds => ds
        .Doughnut()
        .Label("Doughnut Dataset")
        .Data(300, 50, 100)
        .BackgroundColors("#0e9afd", "#ff6285", "#ff9f46")
        .HoverOffset(4)))
.Render())

@(Html.Chart("canvasId")
.Data(d => d
    .Labels("Red", "Blue", "Yellow")
    .Datasets(ds => ds
        .Pie()
        .Label("Doughnut Dataset")
        .Data(300, 50, 100)
        .BackgroundColors("#0e9afd", "#ff6285", "#ff9f46")
        .HoverOffset(4)))
.Render())

Common Dataset Options¶

These options are common to all datasets.

BackgroundColor¶

The line fill color.

.BackgroundColor("green")

BorderColor¶

The line color.

.BorderColor("grey")

BorderWidth¶

The line width (in pixels).

.BorderWidth(1)

Clip¶

How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea.

.Clip(3)

Is clip enabled?

.Clip(false)

Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}

.Clip(c => c.Left(5).Top(false).Right(-2).Bottom(0))

Hidden¶

Configure the visibility of the dataset. Using hidden: true will hide the dataset from being rendered in the Chart.

.Hidden(true)

HoverBackgroundColor¶

Background color when hovered.

.HoverBackgroundColor("blue")

HoverBorderColor¶

Border color when hovered.

.HoverBorderColor("grey")

HoverBorderWidth¶

The line width (in pixels) when hovered.

.HoverBorderWidth(3)

Label¶

The label for the dataset which appears in the legend and tooltips.

.Label("First Bar Dataset")

Parsing¶

How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.

.Parsing(true)

Parsing with key.

.Parsing("key")

Parsing with x and y axis keys.

.Parsing("xKey", "yKey")

Arc Dataset Options¶

BackgroundColors¶

Set backgrounds colors.

.BackgroundColors("green", "yellow", "blue")

BorderAlign¶

Default 'center'

.BorderAlign(BorderAlign.Inner)

BorderDash¶

Arc border length and spacing of dashes.

.BorderDash(15, 3, 3, 3)

BorderDashOffset¶

Arc border offset for line dashes. Default 0.0

.BorderDashOffset(0.1)

BorderJoinStyle¶

Arc border join style.

.BorderJoinStyle(JoinStyle.Bevel)

Data¶

Set Data for arc chart.

.Data(3, 5, 2, 4)

HoverBorderDash¶

Arc border length and spacing of dashes when hovered.

.HoverBorderDash(15, 3, 3, 3)

HoverBorderDashOffset¶

Arc border offset for line dashes when hovered.

.HoverBorderDashOffset(0.1)

HoverBorderJoinStyle¶

Arc border join style when hovered.

.HoverBorderJoinStyle(JoinStyle.Bevel)

Dougnut&Pie Dataset Options¶

Circumference¶

Per-dataset override for the sweep that the arcs cover.

.Circumference(2)

HoverOffset¶

Arc offset when hovered (in pixels). Default 0

.HoverOffset(1)

Offset¶

Arc offset (in pixels). Default 0

.Offset(1)

Arc offset (in pixels). (multiple)

.Offset(1, 2)

Rotation¶

Per-dataset override for the starting angle to draw arcs from.

.Rotation(1)

Spacing¶

Fixed arc offset (in pixels). Similar to offset but applies to all arcs. Default 0

.Spacing(1)

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. Default 1

.Weight(2)