Skip to content
Bricks Academy
Get Bricks

Pie chart

The Pie Chart element displays a circular progress chart with customizable percentage, colors, and content.

Settings

Section titled “Settings”

  • Percentage (number) - The percentage value to display (0-100). Default: 60.

  • Chart size in px (number) - Diameter of the chart in pixels. Default: 160.

  • Line width in px (number) - Thickness of the progress line. Default: 8.

  • Line cap (select) - Style of the line ends. Options: butt, round, square. Default: square.

  • Content (select) - What to display in the center. Options: percent, icon, text. Default: percent.

  • Icon (icon) - Icon to display in the center. Only shown when Content is set to “icon”.

  • Text (text) - Custom text to display in the center. Only shown when Content is set to “text”.

  • Bar color (color) - Color of the progress bar. Default: Primary theme color.

  • Track color (color) - Color of the background track. Default: Light background color.

  • Scale length in px (number) - Length of the scale marks.

  • Scale color (color) - Color of the scale marks. Only shown when Scale length is set.