Basic Bar Chart

<PrimerApexChart Title="Basic Bar Chart"
                    SeriesName="Sales"
                    Width="100%"
                    Height="300px"
                    ShowTitleName="false"
                    SeriesType="SeriesType.Bar"
                    Data="@BarData" />

Basic Line Chart

<PrimerApexChart Title="Basic Line Chart"
                    SeriesName="Revenue"
                    Width="100%"
                    Height="300px"
                    ShowTitleName="false"
                    SeriesType="SeriesType.Line"
                    Data="@LineData" />Q

Multi Series Line Chart

<PrimerApexChart Title="Multi Series Line Chart"
                    Width="100%"
                    Height="370px"
                    SeriesType="SeriesType.Line"
                    ChartOptions="@MultiOptions"
                    SeriesData="@MultiLineData"
                    ShowTitleName="false"
                    ShowSeriesName="false" />

Stacked Bar Sparkline

<PrimerApexChart Width="100%"
                    Height="80px"
                    SeriesType="SeriesType.Bar"
                    ChartOptions="@StackedOptions"
                    SeriesData="@StackedBarData"
                    ShowTitleName="false"
                    ShowSeriesName="false" />

Small Line Sparkline

<PrimerApexChart Width="100%"
                    Height="100px"
                    SeriesType="SeriesType.Line"
                    ChartOptions="@SmallLineOptions"
                    SeriesData="@SmallLineData"
                    ShowTitleName="false"
                    ShowSeriesName="false" />

Radial Bar Chart

<PrimerApexChart Width="100%"
                    Height="135px"
                    SeriesType="SeriesType.RadialBar"
                    ChartOptions="@RadialOptions"
                    SeriesData="@RadialData"
                    ShowTitleName="false"
                    ShowSeriesName="false" />

Donut Chart

<PrimerApexChart Width="100%"
                    Height="140px"
                    SeriesType="SeriesType.Donut"
                    ChartOptions="@DonutOptions"
                    SeriesData="@DonutData"
                    ShowTitleName="false"
                    ShowSeriesName="false" />

Apex Chart Options

Options for PrimerApexChart component

NameDescriptionDefault Value
Title
Chart title
"Apex Chart"
SeriesName
Name for single series chart
"Series"
Data
Single series data points
new List<DataPoint>()
SeriesData
Multiple series data
Dictionary<string, List<DataPoint>>
SeriesType
Chart type (Line, Bar, etc)
SeriesType.Line
Width
Chart width
"100%"
Height
Chart height
"300px"
In Blazor Web Apps (.NET 9), ApexCharts and other JS-based components require @rendermode InteractiveServer to be specified, otherwise the charts will not render.
    // Bar Chart Data
    private List<DataPoint> BarData = new()
    {
        new() { X = "Mon", Y = 30 },
        new() { X = "Tue", Y = 40 },
        new() { X = "Wed", Y = 35 },
        new() { X = "Thu", Y = 50 },
        new() { X = "Fri", Y = 49 },
        new() { X = "Sat", Y = 60 },
        new() { X = "Sun", Y = 70 }
    };

    // Line Chart Data
    private List<DataPoint> LineData = new()
    {
        new() { X = "Jan", Y = 200 },
        new() { X = "Feb", Y = 300 },
        new() { X = "Mar", Y = 400 },
        new() { X = "Apr", Y = 500 }
    };

    // Multi Line
    private Dictionary<string, List<DataPoint>> MultiLineData = new()
    {
        ["Sales"] = new() { new() { X = "Jan", Y = 20 }, new() { X = "Feb", Y = 40 }, new() { X = "Mar", Y = 35 } },
        ["Revenue"] = new() { new() { X = "Jan", Y = 30 }, new() { X = "Feb", Y = 50 }, new() { X = "Mar", Y = 45 } }
    };

    private ApexChartOptions<DataPoint> MultiOptions = new()
    {
        Chart = new() { Type = ChartType.Line, Toolbar = new() { Show = false } }
    };

    // Stacked Bar Sparkline
    private Dictionary<string, List<DataPoint>> StackedBarData = new()
    {
        ["Completed"] = Enumerable.Range(1, 7).Select(i => new DataPoint { X = $"Day {i}", Y = Random.Shared.Next(20, 40) }).ToList(),
        ["Pending"] = Enumerable.Range(1, 7).Select(i => new DataPoint { X = $"Day {i}", Y = Random.Shared.Next(10, 20) }).ToList()
    };

    private ApexChartOptions<DataPoint> StackedOptions = new()
    {
        Chart = new() { Type = ChartType.Bar, Stacked = true, Sparkline = new() { Enabled = true } }
    };

    // Small Line Sparkline
    private Dictionary<string, List<DataPoint>> SmallLineData = new()
    {
        ["This Week"] = new()
        {
            new() { X = "Mon", Y = 5 },
            new() { X = "Tue", Y = 7 },
            new() { X = "Wed", Y = 4 },
            new() { X = "Thu", Y = 10 }
        }
    };

    private ApexChartOptions<DataPoint> SmallLineOptions = new()
    {
        Chart = new() { Type = ChartType.Line, Toolbar = new() { Show = false }, Zoom = new() { Enabled = false } },
        Colors = new() { "#1f6feb" }
    };

    // Radial Chart
    private Dictionary<string, List<DataPoint>> RadialData = new()
    {
        ["Customers"] = new()
        {
            new() { X = "Returning", Y = 28 },
            new() { X = "New", Y = 72 }
        }
    };

    private ApexChartOptions<DataPoint> RadialOptions = new()
    {
        Chart = new() { Type = ChartType.RadialBar, Sparkline = new() { Enabled = true } }
    };

    // Donut Chart
    private Dictionary<string, List<DataPoint>> DonutData = new()
    {
        ["Customers"] = new()
        {
            new() { X = "Paid", Y = 30 },
            new() { X = "Free", Y = 70 }
        }
    };

    private ApexChartOptions<DataPoint> DonutOptions = new()
    {
        Chart = new() { Type = ChartType.Donut, Sparkline = new() { Enabled = true } }
    };