Create a Chart in Blazor using FusionCharts
FusionCharts is a JavaScript charting library that enables you to create interactive charts, gauges, maps, and dashboards in JavaScript. The BlazorFusionCharts
component lets you easily elevate data visualization to any Blazor project. On this page, we'll see how to install FusionCharts and render a chart using the BlazorFusionCharts
component.
Integrating FusionCharts into Blazor applications can help users create visually appealing and informative data visualizations, enhancing the overall experience.
Prerequisite
Please ensure you have the following items installed or updated before starting.
- Visual Studio (Used Community Edition 2022 - 17.6.1) on Windows or Mac.
- Alternatively, you can install .NET for MacOS or .NET for Linux.
IMPORTANT NOTE: Install Blazor if not present already.
Installation
Setup using NuGet Package
Follow these steps to install Blazor using the NuGet Package.
Open the project in Visual Studio.
Go to
Manage Nuget Packages
, search forBlazorFusionCharts
, and click theAdd Package
button to install the package.
Installation and Including Dependencies
To create a new Blazor application:
- Remove the FusionCharts package from the following locations:
- For Windows:
C:\Users\XXX.nuget\packages
- For macOS and Linux:
~/.nuget/packages
Install the latest package from Nuget.org.
Upon successful installation, manually add the
blazor-fusionCharts.js
file from the “C:\Users\XXX.nuget\packages\blazorfusioncharts\1.0.0\staticwebassets” address to the wwwroot folder. Or from the address "~/.nuget/packages/blazorfusioncharts/1.0.0/staticwebassets/" to your app's wwwroot folder.In the
_Host.cshtml
file, add the following script tags:<script type=”text/javascript” src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”></script> <script src=”~/blazor-fusionCharts.js”></script>
In the
_Imports.razor
file, add the FusionChartsInterop as follows:@using FusionCharts.FusionChartsInterop
In the
Program.cs
file, add the FusionCharts service as follows:builder.Services.AddScoped<FusionCharts.FusionChartsInterop.FusionChartsService>(); builder.Services.AddHttpClient();
Steps to run examples
Start by referring to the Blazor documentation link for a detailed guide on setting up and installing the necessary dependencies.
Clone the code repository to your local machine from blazor-fusioncharts and follow these simple steps to install Blazor.
For Windows:
- Ensure the following workloads are selected during the Visual Studio installation:
- ASP.NET and Web Development
- Azure Development
- .NET Desktop
After installation, open the Visual Studio application and select the "Open a project solution" option.
Navigate to "examples" directory and open the
demo.sln
file.Run the
demo
by clicking the "Run" button in the toolbar.Open your preferred web browser and navigate to the appropriate address to view and interact with your Blazor app.
For MacOS and Linux:
Open the terminal from your project directory and run the ‘dotnet watch’ command from your
demo
directory in the terminal.Open your preferred web browser and navigate to the appropriate address to view and interact with your Blazor app.
Create an application using FusionCharts
Using FusionCharts, you can create your application. For starters, ensure you install Node.js
and .NET
in your environment.
To create a basic column 2D
chart, open your cshtml file and add the following code:
<script src="~/fusioncharts/fusioncharts.js"></script>
<script src="~/blazor-fusionCharts.js"></script>
Next, in the respective razor file, expose a code block as follows:
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{}
else
{}
}
}
Now, create the renderColumnChart()
function in the code block as follows:
@code {
private async Task renderColumnChart()
{
dynamic myChartConfig = new System.Dynamic.ExpandoObject();
dynamic myDataSource = new System.Dynamic.ExpandoObject();
dynamic myChart = new System.Dynamic.ExpandoObject();
dynamic myEvent = new System.Dynamic.ExpandoObject();
myEvent.dataPlotClick = "function() { console.log('dataPlotClick')}";
myChartConfig.type = "column2D";
myChartConfig.width = 1000;
myChartConfig.height = 600;
myChartConfig.dataFormat = "json";
myChartConfig.renderAt = "demoID";
myChart.caption = "Monthly Sales";
myChart.subCaption = "Last year";
myChart.xAxisName = "Month";
myChart.yAxisName = "Sales (in USD)";
myChart.theme = "fusion";
myDataSource.data = new[] {
new { label = "February", value = "340000" },
new { label = "March", value = "740000" },
new { label = "April", value = "800000" },
new { label = "May", value = "400000" },
new { label = "June", value = "620000" },
new { label = "July", value = "870000" },
new { label = "August", value = "60000" },
new { label = "September", value = "720000" },
new { label = "October", value = "10000" },
new { label = "November", value = "40000" }
};
myDataSource.chart = myChart;
myChartConfig.events = myEvent;
myChartConfig.dataSource = myDataSource;
String chartConfig = System.Text.Json.JsonSerializer.Serialize(myChartConfig);
await fusionChartsService.renderChart(chartConfig);
}
The function above uses dynamic data type to create a JSON object of the chart’s configurations. Later on, once the object is created, it is serialized and then sent to the service file.
String chartConfig = System.Text.Json.JsonSerializer.Serialize(myChartConfig);
await fusionChartsService.renderChart(chartConfig);
Finally, call the demo()
function from OnAfterRenderAsync
as follows:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await demo();
}
else
{
}
}
Preparing the Data
Let's create a chart showing the "Last year's Monthly Sales". The monthly sales data present is shown in tabular form below.
Month | Sales (in USD) |
---|---|
January | 380000 |
February | 340000 |
March | 740000 |
April | 800000 |
May | 400000 |
June | 620000 |
July | 870000 |
August | 60000 |
September | 720000 |
October | 10000 |
November | 40000 |
Since we are plotting a single dataset, let us create a column 2D chart with 'month' as data labels along the x-axis and 'Sales (in USD)' as data values along the y-axis. Then, let us prepare the data for a single-series chart.
FusionCharts accepts the data in JSON format. So the above data in the tabular form will look as shown below:
/// Preparing the chart data
List<dynamic> chartData = [
new { label = "January", value = "380000" },
new { label = "February", value = "340000" },
new { label = "March", value = "740000" },
new { label = "April", value = "800000" },
new { label = "May", value = "400000" },
new { label = "June", value = "620000" },
new { label = "July", value = "870000" },
new { label = "August", value = "60000" },
new { label = "September", value = "720000" },
new { label = "October", value = "10000" },
new { label = "November", value = "40000" }
];
Configure Your Chart
Now that the data is ready let's work on the styling, positioning, and giving your chart context.
/// Create a JSON object to store the chart configurations
@code {
private async Task renderColumnChart()
{
dynamic myChartConfig = new System.Dynamic.ExpandoObject();
dynamic myDataSource = new System.Dynamic.ExpandoObject();
dynamic myChart = new System.Dynamic.ExpandoObject();
dynamic myEvent = new System.Dynamic.ExpandoObject();
myEvent.dataPlotClick = "function() { console.log('dataPlotClick')}";
myChartConfig.type = "column2D";
myChartConfig.width = 1000;
myChartConfig.height = 600;
myChartConfig.dataFormat = "json";
myChartConfig.renderAt = "demoID";
myChart.caption = "Monthly Sales";
myChart.subCaption = "Last year";
myChart.xAxisName = "Month";
myChart.yAxisName = "Sales (in USD)";
myChart.theme = "fusion";
/// Chart Data - from step 2
data: chartData
}
};
The
type
attribute in the chartConfigs object specifies the type of chart being rendered. You can look at different chart types with their aliases here.
Render the Chart
Finally, prepare to render your first chart using the BlazorFusionCharts
component. In your "Index.razor" file, replace your entire code with the following code sample below.
For this example, let's use the "examples" directory. Copy the full code here from this file.
// STEP 1: Include the dependencies
<script src="~/fusioncharts/fusioncharts.js"></script>
<script src="~/blazor-fusionCharts.js"></script>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{}
else
{}
}
}
// STEP 2 and 3: Prepare the data and Configure your chart
@code {
private async Task renderColumnChart()
{
dynamic myChartConfig = new System.Dynamic.ExpandoObject();
dynamic myDataSource = new System.Dynamic.ExpandoObject();
dynamic myChart = new System.Dynamic.ExpandoObject();
dynamic myEvent = new System.Dynamic.ExpandoObject();
myEvent.dataPlotClick = "function() { console.log('dataPlotClick')}";
myChartConfig.type = "bar2D";
myChartConfig.width = 1000;
myChartConfig.height = 600;
myChartConfig.dataFormat = "json";
myChartConfig.renderAt = "demoID";
myChart.caption = "Monthly Sales";
myChart.subCaption = "Last year";
myChart.xAxisName = "Month";
myChart.yAxisName = "Sales (in USD)";
myChart.theme = "fusion";
myDataSource.data = new[] {
new { label = "January", value = "380000" },
new { label = "February", value = "340000" },
new { label = "March", value = "740000" },
new { label = "April", value = "800000" },
new { label = "May", value = "400000" },
new { label = "June", value = "620000" },
new { label = "July", value = "870000" },
new { label = "August", value = "60000" },
new { label = "September", value = "720000" },
new { label = "October", value = "10000" },
new { label = "November", value = "40000" }
};
myDataSource.chart = myChart;
myChartConfig.events = myEvent;
myChartConfig.dataSource = myDataSource;
String chartConfig = System.Text.Json.JsonSerializer.Serialize(myChartConfig);
await fusionChartsService.renderChart(chartConfig);
}
// STEP 4: Render the chart
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await demo();
}
else
{
}
}
That's it! Your first chart using BlazorFusionCharts
is ready.
Visit the Blazor Features page to learn more about working with events, methods, and more.