Doughnut & Pie Examples

Pie and doughnut charts are excellent at showing the relational proportions between data. They are effectively the same class in Chart.js, but have one different default value - their cutout.

Doughnut Chart

Source

<RzChart Configure=@(c => c
    .Data(d => d
        .Labels("Red", "Blue", "Yellow")
        .Datasets(ds => ds
            .Doughnut()
            .Label("Doughnut Dataset")
            .Data(300, 50, 100)
            .BackgroundColors("var(--chart-1)", "var(--chart-2)", "var(--chart-3)")
            .HoverOffset(4)
        )
    )
    .Options(o => o
        .Responsive(true)
        .MaintainAspectRatio(false)
        .Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Doughnut Chart")))
    )) />

Pie Chart

Source

<RzChart Configure=@(c => c
    .Data(d => d
        .Labels("Red", "Blue", "Yellow")
        .Datasets(ds => ds
            .Pie()
            .Label("Pie Dataset")
            .Data(300, 50, 100)
            .BackgroundColors("var(--chart-1)", "var(--chart-2)", "var(--chart-3)")
            .HoverOffset(4)
        )
    )
    .Options(o => o
        .Responsive(true)
        .MaintainAspectRatio(false)
        .Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Pie Chart")))
    )) />

Arc Dataset Options

BorderAlign

Default 'center'

.BorderAlign(BorderAlign.Inner)

BorderDash

Arc border length and spacing of dashes. External Link

.BorderDash(15, 3, 3, 3)

BorderDashOffset

Arc border offset for line dashes. Default 0.0 External Link

.BorderDashOffset(0.1)

BorderJoinStyle

Arc border join style. External Link

.BorderJoinStyle(JoinStyle.Bevel)

Data

Set Data for arc chart.

.Data(3, 5, 2, 4)

HoverBorderDash

Arc border length and spacing of dashes when hovered. External Link

.HoverBorderDash(15, 3, 3, 3)

HoverBorderDashOffset

Arc border offset for line dashes when hovered. External Link

.HoverBorderDashOffset(0.1)

HoverBorderJoinStyle

Arc border join style when hovered. External Link

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