Donut Charts

JavaScript Chart Types

Donut Charts

Back To Categories

Donut charts offer proportional segmented values relative to the whole with a central cutout creating a lighter visualization. JSCharting supports advanced donut features including label callouts, tooltips and middle label support utilizing the internal donut space

Donut Multi

Multiple donut series with multiple shape labels.

Adjustable Shape Donut Chart

Adjust pie shape elements using a slider UI item.

Donut Arc

Pie arc that shows data on only 20 degrees oriented to the right.

Live Data Donut Arc

Donut arc that is used to simulate a circular gauge and updates on a timer.

Basic Donut Chart

A donut chart with labels.

Nested Pie Chart

A nested donut chart with labels.

Outlined Slice Donut Chart

A donut chart with thick slice outlines.

Donut Chart Slice Lengths

Draw donut with z values controlling slice length.

Negative Slice Lengths Donut Chart

Donut chart with only negative z values which control the slice lengths.

Positive Negative Slice Lengths Donut Chart

Donut chart with positive and negative z values which control the slice lengths.

Variable Arc Slice Lengths Donut Chart

Donut series with arcs relative to each others sums and varying negative z values.

Donut Chart Slice Length Variations

Differing positive and negative pie z values.

Proportional Arc Donut Segments

Pie series with arcs relative to sums of each series.

Donut Chart Negative Slice Length Variations

Positive and negative z values in pies of varying inner size.

See also Pie Chart Gallery