Chart

The BarChart component renders vertical bars for comparing discrete values across categories. Pass your data via the Data parameter and define series using <Bar> child components with DataKey strings to reference properties.

Set Stacked="true" on each <Bar> child to stack multiple series on top of each other, showing part-to-whole relationships. This is useful for visualizing how multiple categories contribute to a total value across time periods.

The LineChart component renders connected data points to show trends over time. Define each data series using <Line> child components. Multiple series are displayed with different colors from the theme palette.

The AreaChart component emphasizes volume by filling the area beneath the data line. Set Curve="CurveType.Smooth" for smooth curves, or use the default Linear for straight-line segments. Control fill transparency with the FillOpacity parameter.

The PieChart component displays data as proportional slices of a circle. Use <Pie> with DataKey for values and NameKey for category labels. Colors are automatically assigned from the theme palette.

Set InnerRadius on <Pie> to create a donut chart with a hollow center. Use <CenterLabel> inside the <Pie> to display summary information in the center area.

The RadarChart component visualizes multivariate data on axes radiating from a center point. Set IndicatorKey for category labels and use <Radar> child components to define series. Ideal for skill assessments, product comparisons, or any dataset with multiple comparable dimensions.

The ScatterChart component renders data points on a two-dimensional plane, ideal for showing correlations between variables. Use SymbolSize to control dot size, or set SymbolSizeKey to map a data property for bubble-style sizing.

The GaugeChart component renders a speedometer-style visualization for KPI dashboards. Enable ShowProgress for a progress arc, customize the needle with ShowPointer, and format the value display with DetailFormatter.

The CandlestickChart component visualizes financial OHLC (Open-High-Low-Close) data. Bullish candles (close > open) render in green and bearish candles in red by default. Customize colors with BullColor and BearColor.

The FunnelChart component displays progressive narrowing stages, perfect for conversion pipelines and sales funnels. Set Sort to control ordering and Align for horizontal positioning. Labels are shown inside segments by default.

The HeatmapChart component renders a color-coded grid where cell intensity represents data values. Pair it with <BbVisualMap> to show a color gradient scale. Set ShowLabel on the series to display values inside each cell.

The RadialBarChart component displays values as circular arcs around a center point — ideal for progress indicators and comparative metrics. Enable ShowBackground for track bars and use <BbCenterLabel> to display summary text in the center.