A blazor wrapper for ApexCharts.js
Please note: Not (yet) production ready.
dotnet add package Blazor-ApexChartsIn _Host.cshtml (server-side) or in index.html (client-side) add the following lines to the body tag after the _framework reference
<script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
<script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>Add a reference to Blazor-ApexCharts in your _Imports.razor
@using ApexCharts; <ApexChart TItem="Order" Title="Orders Net Value By Type" ChartType="ChartType.Pie">
<ApexSeries TItem="Order"
Items="SampleData.GetOrders()"
Name="Order Value"
XValue="@(e => e.OrderType)"
YAggregate="@(e => e.Sum(e => e.NetValue))"
ShowDataLabels="true" />
</ApexChart>
Apex Chart options is available in the ApexChartOptions class that can be passed to the chart. More info in Apex documentation ApexCharts Docs. See sample below
The chart will automatically re-render if data changes. It's possible to turn this of by setting ManualRender to true on the chart and then use the chart method Render() to render the chart. See the sample render chart
@page "/datetime-chart"
<h3>DateTime Chart</h3>
<div class="row">
<div class="col-md-12 col-lg-6">
<ApexChart TItem="Order" Title="Orders Value"
OnDataPointSelection="DataPointSelected"
ChartType="ChartType.Bar"
XAxisType="XaxisType.Datetime"
Options="options">
<ApexSeries TItem="Order"
Items="SampleData.GetOrders()"
Name="Net Value"
XValue="@(e => e.OrderDate.FirstDayOfMonth())"
YAggregate="@(e => e.Sum(e => e.NetValue))"
OrderBy="e=>e.X" />
<ApexSeries TItem="Order"
Items="SampleData.GetOrders()"
Name="Gross Value"
XValue="@(e => e.OrderDate.FirstDayOfMonth())"
YAggregate="@(e => e.Sum(e => e.GrossValue))"
OrderBy="e=>e.X" />
</ApexChart>
</div>
</div>
<SelectedData Data="selectedData" />@code {
private ApexChartOptions<Order> options = new ApexCharts.ApexChartOptions<Order>();
private SelectedData<Order> selectedData;
protected override void OnInitialized()
{
options.Tooltip = new Tooltip { X = new TooltipX { Format = @"MMMM \ yyyy" } };
options.Subtitle = new Subtitle { OffsetY = 15, Text = "DateTime sample with options" };
options.Xaxis = new XAxis
{
Title = new XaxisTitle
{
OffsetY = 5,
Text = "Month",
Style = new XAxistTitleStyle { FontSize = "14px", Color = "lightgrey" }
}
};
options.Yaxis = new List<YAxis>();
options.Yaxis.Add(new YAxis
{
Labels = new YAxisLabels { Rotate = -45, Style = new YAxisLabelStyle { FontSize = "10px" } },
Title = new YaxisTitle { Text = "Value", Style = new YAxisTitleStyle { FontSize = "14px", Color = "lightgrey" } }
});
options.Annotations = new Annotations { Yaxis = new List<AnnotationsYAxis>() };
options.Annotations.Yaxis.Add(new AnnotationsYAxis
{
Y = 50000,
BorderWidth = 2,
StrokeDashArray = 5,
BorderColor = "red",
Label = new AnnotationsYAxisLabel { Text = "Monthly Target" }
});
}
private void DataPointSelected(SelectedData<Order> selected)
{
selectedData = selected;
}
}Order Class
public class Order
{
public Guid OrderId { get; set; } = Guid.NewGuid();
public string CustomerName { get; set; }
public string Country { get; set; }
public DateTimeOffset OrderDate { get; set; }
public OrderType OrderType { get; set; }
public decimal GrossValue { get; set; }
public decimal NetValue { get => GrossValue * (1 - (DiscountPrecentage / 100)) ; }
public decimal DiscountPrecentage { get; set; }
}
public enum OrderType
{
Web, Contract, Mail, Phone
}Order Data
public static class SampleData
{
public static List<Order> GetOrders()
{
var orders = new List<Order>();
orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-12), GrossValue = 34531, DiscountPrecentage = 21, OrderType = OrderType.Contract });
orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-100), GrossValue = 2800, DiscountPrecentage = 12, OrderType = OrderType.Mail });
orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-128), GrossValue = 12532, DiscountPrecentage = 24, OrderType = OrderType.Contract });
orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-232), GrossValue = 1400, DiscountPrecentage = 12, OrderType = OrderType.Mail });
orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-321), GrossValue = 22000, DiscountPrecentage = 10, OrderType = OrderType.Contract });
orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-400), GrossValue = 3000, DiscountPrecentage = 17, OrderType = OrderType.Web });
orders.Add(new Order { CustomerName = "Nascetur AB", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-17), GrossValue = 2134, DiscountPrecentage = 10, OrderType = OrderType.Phone });
orders.Add(new Order { CustomerName = "Nascetur AB", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-27), GrossValue = 11345, DiscountPrecentage = 12, OrderType = OrderType.Phone });
orders.Add(new Order { CustomerName = "Nascetur AB", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-124), GrossValue = 122345, DiscountPrecentage = 32, OrderType = OrderType.Mail });
orders.Add(new Order { CustomerName = "Nascetur AB", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-299), GrossValue = 1235, DiscountPrecentage = 12, OrderType = OrderType.Mail });
orders.Add(new Order { CustomerName = "Nascetur AB", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-372), GrossValue = 44000, DiscountPrecentage = 11, OrderType = OrderType.Phone });
orders.Add(new Order { CustomerName = "Nascetur AB", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-410), GrossValue = 17000, DiscountPrecentage = 5, OrderType = OrderType.Phone });
orders.Add(new Order { CustomerName = "Justo Eu Institute", Country = "Spain", OrderDate = DateTimeOffset.Now.AddDays(-13), GrossValue = 2800, DiscountPrecentage = 12, OrderType = OrderType.Mail });
orders.Add(new Order { CustomerName = "Justo Eu Institute", Country = "Spain", OrderDate = DateTimeOffset.Now.AddDays(-45), GrossValue = 12532, DiscountPrecentage = 24, OrderType = OrderType.Web });
orders.Add(new Order { CustomerName = "Justo Eu Institute", Country = "Spain", OrderDate = DateTimeOffset.Now.AddDays(-60), GrossValue = 1400, DiscountPrecentage = 12, OrderType = OrderType.Mail });
orders.Add(new Order { CustomerName = "Justo Eu Institute", Country = "Spain", OrderDate = DateTimeOffset.Now.AddDays(-150), GrossValue = 22000, DiscountPrecentage = 10, OrderType = OrderType.Web });
orders.Add(new Order { CustomerName = "Justo Eu Institute", Country = "Spain", OrderDate = DateTimeOffset.Now.AddDays(-200), GrossValue = 3000, DiscountPrecentage = 17, OrderType = OrderType.Web });
orders.Add(new Order { CustomerName = "Ani Vent", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-17), GrossValue = 2134, DiscountPrecentage = 10, OrderType = OrderType.Phone });
orders.Add(new Order { CustomerName = "Ani Vent", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-27), GrossValue = 11345, DiscountPrecentage = 12, OrderType = OrderType.Phone });
orders.Add(new Order { CustomerName = "Ani Vent", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-124), GrossValue = 122345, DiscountPrecentage = 32, OrderType = OrderType.Mail });
orders.Add(new Order { CustomerName = "Cali Inc", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-10), GrossValue = 77000, DiscountPrecentage = 17, OrderType = OrderType.Web });
orders.Add(new Order { CustomerName = "Cali Inc", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-110), GrossValue = 120000, DiscountPrecentage = 23, OrderType = OrderType.Web });
orders.Add(new Order { CustomerName = "Cali Inc", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-243), GrossValue = 44000, DiscountPrecentage = 8, OrderType = OrderType.Web });
return orders;
}
}