BcGaugeChart
Description
The BcGaugeChart component displays a percentage value as a circular gauge, ideal for showing progress or completion status. It supports single color, multi-color gradient (red-yellow-green), and custom gradient modes.
Demo
Show Percentage
Percentage
Size
Mode Examples
Sample Code
Parameters
Percentage
double
The percentage value to display (0-100).
Options
BcGaugeChartOptions
Configuration options for the chart appearance and behavior.
BcGaugeChartOptions Properties
Color
string
The fill color of the gauge (used in SingleColor mode).
BackgroundColor
string
The background color of the unfilled portion.
TextColor
string
The color of the percentage text.
Size
int
The size (width and height) of the chart canvas in pixels.
LineWidth
double
The width of the gauge arc.
ShowPercentage
bool
Whether to display the percentage value in the center.
Style
string?
Additional CSS styles to apply to the chart container.
Mode
GaugeChartMode
The color mode: SingleColor, MultiColor, or Custom.
GradientMixer
BcCssGradientMixer?
Custom gradient mixer for Custom mode.
GaugeChartMode Enum
Uses a single color specified by the Color property.
Uses a red-yellow-green gradient based on the percentage value.
Uses a custom gradient defined by the GradientMixer property.
Methods
Programmatically set the percentage value and redraw the gauge.