How to get started with Blazor Chart Component?
Blazor Chart Component is used to visualize data. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It also comes with features such as zooming, panning, tooltip, crosshair, trackball, highlight, and selection.
The Blazor Chart Library provides support to customize the appearance of each element in the chart, such as axis, ranges, axis intervals, background, border, pointer positions, label positions, Margin and more.
In this knowledge base, we are going to provide details about how to include a Blazor Graph Component in your Blazor Server-Side application. You can refer to our Getting Started with Blazor Server-Side Graph documentation page for configuration specifications.
Importing Syncfusion Blazor component in the application
- Install Syncfusion.Blazor NuGet package to the application by using the NuGet Package Manager.
- You can add the client-side style resources through CDN or from NuGet package in the HEAD element of the ~/Pages/_Host.cshtml page.
<head> .... .... <link href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> <!---CDN---> @*<link href="https://cdn.syncfusion.com/blazor/18.1.36-beta/styles/bootstrap4.css" rel="stylesheet" />*@ </head>
Adding component package to the application
Open ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Charts Packages.
@using Syncfusion.Blazor @using Syncfusion.Blazor.Charts
Add SyncfusionBlazor service in Startup.cs
Open the Startup.cs file and add services required by Syncfusion components using service.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
On Chart initial loading, we gather text measure information for rendering purposes. Since its size exceeds the default SignalR buffer size 32 KB, the server will be disconnected. So you need to add the following service to increase the buffer size to 64 KB over the SignalR connection.
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
services.AddSignalR(e => {
e.MaximumReceiveMessageSize = 65536;
});
}
}
}
To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by AddSyncfusionBlazor(true) and load the scripts in the HEAD element of the ~/Pages/_Host.cshtml page.
<head> <script src="https://cdn.syncfusion.com/blazor/18.1.36-beta/dist/syncfusion-blazor.min.js"></script> </head>
Adding Chart component to the application
To initialize the Blazor Chart component add the below code to your Index.razor view page which is present under ~/Pages folder
Adding the lodash script is mandatory since we have used it in our chart’s interactive features. The absence of the script will result in console errors.
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script> </head>
in the HEAD element of the ~/Pages/_Host.cshtml page for server side blazor application, in the HEAD element of the ~/wwwroot/index.html for wasm application.
<SfChart> </SfChart>
Populate Chart With Data
To bind data for the Chart component, you can assign a IEnumerable object to the DataSource property. The list data source can also be provided as an instance of the DataManager.
@using Syncfusion.Blazor.Charts
<SfChart Width="60%" Title="Sales Analysis">
<ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
<ChartMarker>
<ChartDataLabel Visible="true"></ChartDataLabel>
</ChartMarker>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
public class SalesInfo
{
public string Month { get; set;}
public double SalesValue { get; set;}
}
public List<SalesInfo> Sales = new List<SalesInfo>
{
new SalesInfo { Month = "Jan", SalesValue = 35 },
new SalesInfo { Month = "Feb", SalesValue = 28 },
new SalesInfo { Month = "Mar", SalesValue = 34 },
new SalesInfo { Month = "Apr", SalesValue = 32 },
new SalesInfo { Month = "May", SalesValue = 40 },
new SalesInfo { Month = "Jun", SalesValue = 32 },
new SalesInfo { Month = "Jul", SalesValue = 35 }
};
}
Enable Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the Enable property as true in TooltipSettings.
@using Syncfusion.Blazor.Charts
<SfChart Width="60%" Title="Sales Analysis">
<ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
public class SalesInfo
{
public string Month { get; set;}
public double SalesValue { get; set;}
}
public List<SalesInfo> Sales = new List<SalesInfo>
{
new SalesInfo { Month = "Jan", SalesValue = 35 },
new SalesInfo { Month = "Feb", SalesValue = 28 },
new SalesInfo { Month = "Mar", SalesValue = 34 },
new SalesInfo { Month = "Apr", SalesValue = 32 },
new SalesInfo { Month = "May", SalesValue = 40 },
new SalesInfo { Month = "Jun", SalesValue = 32 },
new SalesInfo { Month = "Jul", SalesValue = 35 }
};
}
Enable Legend
You can use legend for the chart by setting the Visible property to true in LegendSettings. The name of the legend can be set by using Name property in the series.
@using Syncfusion.Blazor.Charts
<SfChart Width="60%" Title="Sales Analysis">
<ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
<ChartLegendSettings Visible="true"></ChartLegendSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" Name="Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
public class SalesInfo
{
public string Month { get; set;}
public double SalesValue { get; set;}
}
public List<SalesInfo> Sales = new List<SalesInfo>
{
new SalesInfo { Month = "Jan", SalesValue = 35 },
new SalesInfo { Month = "Feb", SalesValue = 28 },
new SalesInfo { Month = "Mar", SalesValue = 34 },
new SalesInfo { Month = "Apr", SalesValue = 32 },
new SalesInfo { Month = "May", SalesValue = 40 },
new SalesInfo { Month = "Jun", SalesValue = 32 },
new SalesInfo { Month = "Jul", SalesValue = 35 }
};
}
Conclusion
I hope you enjoyed learning how to get started with Blazor Chart Component.
You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
