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.

Color countries by a numeric value using ISO codes or English country names. See Map Chart for custom scales, pan/zoom, and country click examples.

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.

The RoseChart component draws a Nightingale rose: a pie whose sectors also vary in radius, so a long sector reads as a large value. BbRose derives from BbPie, so the donut hole, labels, leader lines and <BbCenterLabel> all apply. Mode is the one parameter it adds — Radius keeps the pie's proportional angles, Area gives every sector an equal angle.

The SankeyChart component shows how a quantity splits and recombines between stages. Bind a collection of links, not of nodes: BbSankey reads SourceKey, TargetKey and DataKey from each row and derives the node list in first-seen order, which is also the palette order. A link that would close a cycle is dropped rather than thrown, because ECharts blanks the whole chart on a cycle.

Nest BbLinearGradient inside BbFill and define its colors with BbGradientStop. Offsets run from 0 to 1; use GradientDirection.Horizontal for a left-to-right gradient.

Use BbChart to combine different series types in one chart. This example shares axes between bar and line series.