×

Donut Charts

Donut Charts

Theme Colors

.donut-color-1
.donut-color-2
No color class

Bootstrap Colors

.donut-color-primary
.donut-color-success
.donut-color-warning
.donut-color-danger
.donut-color-info

Custom Colors

data-color="#FF5500"
data-color="#3C4BE2"
data-color="#B848FF"

Preset Chart Theme Colors

Where you can use the classes below:

  • Add "donut-color-1" for your theme first color.
  • Add "donut-color-2" for your theme second color.

Preset Chart Bootstrap Colors

Where you can use the classes below:

  • Not entering the respective color class will render it grey.
  • Add "donut-color-primary" for your theme first color.
  • Add "donut-color-success" for Bootstrap green color.
  • Add "donut-color-warning" for Bootstrap yellow color.
  • Add "donut-color-danger" for Bootstrap red color.
  • Add "donut-color-info" for Bootstrap cyan color.

Custom Chart Colors

You can also use the data parameter data-color="#B143A7" (enter hexadecimal color value) for a specific color of your choosing. This parameter is optional.

Custom Chart Percentage

Use the data parameter data-percentage="40" (enter a value from 0 to 100). This parameter is necessary for the donut rendering.

View code