<PrimerApexChart Title="Basic Bar Chart"
SeriesName="Sales"
Width="100%"
Height="300px"
ShowTitleName="false"
SeriesType="SeriesType.Bar"
Data="@BarData" />
<PrimerApexChart Title="Basic Line Chart"
SeriesName="Revenue"
Width="100%"
Height="300px"
ShowTitleName="false"
SeriesType="SeriesType.Line"
Data="@LineData" />Q
<PrimerApexChart Title="Multi Series Line Chart"
Width="100%"
Height="370px"
SeriesType="SeriesType.Line"
ChartOptions="@MultiOptions"
SeriesData="@MultiLineData"
ShowTitleName="false"
ShowSeriesName="false" />
<PrimerApexChart Width="100%"
Height="80px"
SeriesType="SeriesType.Bar"
ChartOptions="@StackedOptions"
SeriesData="@StackedBarData"
ShowTitleName="false"
ShowSeriesName="false" />
<PrimerApexChart Width="100%"
Height="100px"
SeriesType="SeriesType.Line"
ChartOptions="@SmallLineOptions"
SeriesData="@SmallLineData"
ShowTitleName="false"
ShowSeriesName="false" />
<PrimerApexChart Width="100%"
Height="135px"
SeriesType="SeriesType.RadialBar"
ChartOptions="@RadialOptions"
SeriesData="@RadialData"
ShowTitleName="false"
ShowSeriesName="false" />
<PrimerApexChart Width="100%"
Height="140px"
SeriesType="SeriesType.Donut"
ChartOptions="@DonutOptions"
SeriesData="@DonutData"
ShowTitleName="false"
ShowSeriesName="false" />
Options for PrimerApexChart component
Name | Description | Default 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" |
// 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 } }
};