Skip to content
CHARTS · COMPLETE

BarChart

Compare values clearly with vertical or horizontal bars, clustered or stacked.

Compare values clearly with vertical or horizontal bars, clustered or stacked, with negative values supported.

Why it helps

  • Vertical or horizontal
  • Clustered or stacked
  • Click on bars

Where it fits

  • Sales by quarter
  • Category comparison
  • Survey answers

Example

<BarChart Label="Revenue by quarter" Categories="_quarters" Series="_series" ShowDataLabels="true" Trend="ChartTrend.MovingAverage" TrendPeriod="2" ShowExport="true" />

@code {
    private readonly string[] _quarters = ["Q1", "Q2", "Q3", "Q4", "Q1", "Q2", "Q3", "Q4"];

    private readonly ChartSeries[] _series =
    [
        new("Revenue", [120, 135, 128, 160, 172, 181, 177, 205])
    ];
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Part of RayCraft Complete.

All controls ยท Documentation