Blazor Charts & Graphs Overview
Ignite UI for Blazor Charts & Graphs is an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your web and mobile apps. Built for speed and beauty, designed to work on every modern browser, and with complete touch and interactivity, you can quickly and easily build responsive visuals into your next app on any device.
The Ignite UI for Blazor Charts support over 65 types of series and combinations that let you visualize any type of data, including Category Series, Financial Series, Polar Series, Radial Series, Range Series, Scatter Series, Shape Series, and Geospatial Series. No matter the type of comparison you are doing, or what type of data story you are trying to tell, you can represent your data in any of these ways:
- Change Over Time
- Comparison
- Correlation
- Distribution
- Geospatial
- Overview + Detail
- Part to Whole
- Ranking
Power your most demanding visualizations with Infragistics Blazor charting!
Blazor Chart and Graph Types
The Blazor product has over 65 different chart and graph types for any scenario – from a single chart display to an interactive dashboard. You can create Blazor charts like Pie, Bar, Area, Line, Point, Stacked, Donut, Scatter, Gauge, Polar, Treemap, Stock, Financial, Geospatial Maps and more for your mobile or web apps. The benefit of our Blazor chart vs. others is full support for features like:
- Responsive Web Design built in
- Interactive Panning and Zooming with Mouse, Keyboard and Touch
- Full Control of Chart Animation
- Chart Drill-Down Events
- Real-Time Streaming Support
- High-Volume (Millions of Data Points) Support
- Trends Lines and other Data Analysis features
Built with a modular design of axis, markers, series, legend, and annotation layers, the Blazor chart makes it easy to design a render any type of data story. Build a simple chart with a single data series, or build more complex data stories with multiple series of data, with multiple axis in composite views.
Category and Financial Chart vs. Data Chart
The Blazor Category and Financial Chart is what we refer to as our domain specific charts. It's a wrapper around Blazor Data Chart that assumes your domain is a category, or financial price series.
Choosing these specific domain charts allows to simplify the API and draw a lot of interfaces about the data to automatically configure the chart scenario, all without needing to explicitly define attributes such as axes, series, and annotations. In contrast, the data chart is very explicit and every critical part of the chart needs to be defined.
Domain charts are using a data chart at its core; so the same performance optimizations apply to both. The difference lies in whether they are trying to make things very easy to specify for the developer, or to be as flexible as possible. Blazor Data Chart is more verbose, unlocking all of our charting capabilities you need, allowing you to mix and match of any number of series, axes or annotation for example. For the category and financial charts, there might be a situation that cannot be easily done that the data chart is more suited for, such as a series with a scatter series with a numeric x axis.
It can be difficult to know which chart to pick at first. It's crucial to understand the type of series and how many additional features you want to present. For a more light-weight basic category or financial series, we recommend using one of the domain charts. For more advances scenarios we recommend using Blazor Data Chart, such as presenting something other than what is covered by the category chart's ChartType property such as a stacked or scatter series, or numeric or time-based data. It's worth noting that the Blazor Financial Chart covers only column, OHLC bar, candlestick, and line series types.
We make Blazor Category and Financial Chart easier to use, the good news you can always switch to data chart in the future.
Blazor Bar Chart
The Blazor Bar Chart, or Bar Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Learn more about our bar chart
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartVerticalCategoryModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class HighestGrossingMoviesItem
{
public string Franchise { get; set; }
public double TotalRevenue { get; set; }
public double HighestGrossing { get; set; }
}
public class HighestGrossingMovies
: List<HighestGrossingMoviesItem>
{
public HighestGrossingMovies()
{
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Avengers", TotalRevenue = 7.76, HighestGrossing = 2.8 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Spider Man", TotalRevenue = 7.22, HighestGrossing = 1.28 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"James Bond", TotalRevenue = 7.12, HighestGrossing = 1.11 });
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbDataChart
Name="Chart"
@ref="chart">
<IgbCategoryYAxis
Name="yAxis"
@ref="yAxis"
Label="Franchise"
UseEnhancedIntervalManagement="true"
EnhancedIntervalPreferMoreCategoryLabels="true"
DataSource="HighestGrossingMovies"
IsInverted="true"
Gap="0.5"
Overlap="-0.1">
</IgbCategoryYAxis>
<IgbNumericXAxis
Name="xAxis"
@ref="xAxis"
Title="Billions of U.S. Dollars">
</IgbNumericXAxis>
<IgbCategoryHighlightLayer
Name="CategoryHighlightLayer"
@ref="categoryHighlightLayer">
</IgbCategoryHighlightLayer>
<IgbBarSeries
Name="BarSeries1"
@ref="barSeries1"
XAxisName="xAxis"
YAxisName="yAxis"
Title="Total Revenue of Franchise"
ValueMemberPath="TotalRevenue"
DataSource="HighestGrossingMovies"
ShowDefaultTooltip="true"
IsTransitionInEnabled="true"
IsHighlightingEnabled="true">
</IgbBarSeries>
<IgbBarSeries
Name="BarSeries2"
@ref="barSeries2"
XAxisName="xAxis"
YAxisName="yAxis"
Title="Highest Grossing Movie in Series"
ValueMemberPath="HighestGrossing"
DataSource="HighestGrossingMovies"
ShowDefaultTooltip="true"
IsTransitionInEnabled="true"
IsHighlightingEnabled="true">
</IgbBarSeries>
<IgbDataToolTipLayer
Name="Tooltips"
@ref="tooltips">
</IgbDataToolTipLayer>
</IgbDataChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var yAxis = this.yAxis;
var xAxis = this.xAxis;
var categoryHighlightLayer = this.categoryHighlightLayer;
var barSeries1 = this.barSeries1;
var barSeries2 = this.barSeries2;
var tooltips = this.tooltips;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbDataChart chart;
private IgbCategoryYAxis yAxis;
private IgbNumericXAxis xAxis;
private IgbCategoryHighlightLayer categoryHighlightLayer;
private IgbBarSeries barSeries1;
private IgbBarSeries barSeries2;
private IgbDataToolTipLayer tooltips;
private HighestGrossingMovies _highestGrossingMovies = null;
public HighestGrossingMovies HighestGrossingMovies
{
get
{
if (_highestGrossingMovies == null)
{
_highestGrossingMovies = new HighestGrossingMovies();
}
return _highestGrossingMovies;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Pie Chart
The Blazor Pie Chart, or Pie Graph, is a very common part-to-whole chart type. Part-to-whole charts show how categories (parts) of a data set add up to a total (whole) value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed. A pie chart renders data values as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. The total values represented by the pie slices represent a whole value, like 100 or 100%. Pie charts are perfect for small data sets and are easy to read at a quick glance. Learn more about our pie chart
Blazor Line Chart
The Blazor Line Chart, or Line Graph is a type of category line graph shows the continuous data values represented by points connected by straight line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. Learn more about our line chart
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
public string Year { get; set; }
public double Europe { get; set; }
public double China { get; set; }
public double America { get; set; }
}
public class CountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
public CountryRenewableElectricity()
{
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2009",
Europe = 34,
China = 21,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2010",
Europe = 43,
China = 26,
America = 24
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2011",
Europe = 66,
China = 29,
America = 28
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2012",
Europe = 69,
China = 32,
America = 26
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2013",
Europe = 58,
China = 47,
America = 38
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2014",
Europe = 40,
China = 46,
America = 31
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2015",
Europe = 78,
China = 50,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2016",
Europe = 13,
China = 90,
America = 52
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2017",
Europe = 78,
China = 132,
America = 50
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2019",
Europe = 80,
China = 96,
America = 38
});
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.Line"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
DataSource="CountryRenewableElectricity"
IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
YAxisTitle="TWh"
YAxisTitleLeftMargin="10"
YAxisTitleRightMargin="5"
YAxisLabelLeftMargin="0"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbCategoryChart chart;
private CountryRenewableElectricity _countryRenewableElectricity = null;
public CountryRenewableElectricity CountryRenewableElectricity
{
get
{
if (_countryRenewableElectricity == null)
{
_countryRenewableElectricity = new CountryRenewableElectricity();
}
return _countryRenewableElectricity;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Donut Chart
The Blazor Donut Chart or Donut Graph, is a variant of a Pie Chart, proportionally illustrating the occurrences of a variable in a circle to represents parts of a whole. The donut chart has a circular opening at the center of the pie chart, where a title or category explanation can be displayed. Donut charts can support multiple concentric rings, with built-in support for visualizing hierarchical data. Learn more about our Donut chart
Blazor Area Chart
The Blazor Area Chart is rendered using a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). Area Charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Learn more about our area chart
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
public string Year { get; set; }
public double Europe { get; set; }
public double China { get; set; }
public double America { get; set; }
}
public class CountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
public CountryRenewableElectricity()
{
this.Add(new CountryRenewableElectricityItem() { Year = @"2009", Europe = 34, China = 21, America = 19 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2010", Europe = 43, China = 26, America = 24 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2011", Europe = 66, China = 29, America = 28 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2012", Europe = 69, China = 32, America = 26 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2013", Europe = 58, China = 47, America = 38 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2014", Europe = 40, China = 46, America = 31 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2015", Europe = 78, China = 50, America = 19 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2016", Europe = 13, China = 90, America = 52 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2017", Europe = 78, China = 132, America = 50 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2018", Europe = 40, China = 134, America = 34 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2018", Europe = 40, China = 134, America = 34 });
this.Add(new CountryRenewableElectricityItem() { Year = @"2019", Europe = 80, China = 96, America = 38 });
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.Area"
DataSource="CountryRenewableElectricity"
IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
YAxisTitle="TWh"
YAxisTitleLeftMargin="10"
YAxisTitleRightMargin="5"
YAxisLabelLeftMargin="0"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbCategoryChart chart;
private CountryRenewableElectricity _countryRenewableElectricity = null;
public CountryRenewableElectricity CountryRenewableElectricity
{
get
{
if (_countryRenewableElectricity == null)
{
_countryRenewableElectricity = new CountryRenewableElectricity();
}
return _countryRenewableElectricity;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Sparkline Chart
The Blazor Sparkline Chart, or Sparkline Graph is a type of category graph intended for rendering within a small-scale layout such as within a grid cell, or anywhere a word-sized visualization is needed to tell a data story. Like other Blazor chart types, the Sparkline Chart has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. Sparkline charts can render as a Line Chart, Area Chart, Column Chart or Win / Loss Chart. The difference between the full-sized chart equivalent to the Spark-chart, is the Y-Axis (left side labels) and X-Axis (bottom labels) are not visible. Learn more about our sparkline chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbSparklineModule));
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Infragistics.Samples
{
public class SparklineItem
{
public double Index { get; set; }
public double Value { get; set; }
public double Angle { get; set; }
public double Expanse { get; set; }
public double Income { get; set; }
}
public static class SparklineData
{
public static List<SparklineItem> Generate()
{
var SparklineItems = new List<SparklineItem>();
var index = 0;
var min = 1000.0;
var max = -1000.0;
for (var angle = 0; angle <= 360 * 4.0; angle += 5)
{
var v1 = Math.Sin(angle * Math.PI / 180);
var v2 = Math.Sin(3 * angle * Math.PI / 180) / 3;
var revenue = v1 + v2;
var expanse = revenue < 0 ? revenue : 0;
var income = revenue > 0 ? revenue : 0;
SparklineItems.Add(new SparklineItem()
{
Index = index++,
Angle = angle,
// Value = v1 + v2
Value = revenue,
Expanse = expanse,
Income = income
});
min = Math.Min(min, v1 + v2);
max = Math.Max(max, v1 + v2);
}
return SparklineItems;
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
@if (Data != null)
{
<label class="legend-title">Sparkline with Line Display Type</label>
<div class="container" style="padding: 0.5rem;">
<IgbSparkline Height="100%" Width="100%" DataSource="Data"
DisplayType="SparklineDisplayType.Line"
ValueMemberPath="Value"
LabelMemberPath="Angle">
</IgbSparkline>
</div>
<label class="legend-title">Sparkline with Area Display Type</label>
<div class="container" style="padding: 0.5rem;">
<IgbSparkline Height="100%" Width="100%" DataSource="Data"
DisplayType="SparklineDisplayType.Area"
ValueMemberPath="Value"
LabelMemberPath="Angle">
</IgbSparkline>
</div>
<label class="legend-title">Sparkline with Column Display Type</label>
<div class="container" style="padding: 0.5rem;">
<IgbSparkline Height="100%" Width="100%" DataSource="Data"
DisplayType="SparklineDisplayType.Column"
ValueMemberPath="Value"
LabelMemberPath="Angle">
</IgbSparkline>
</div>
<label class="legend-title">Sparkline with Win/Loss Display Type</label>
<div class="container" style="padding: 0.5rem;">
<IgbSparkline Height="100%" Width="100%" DataSource="Data"
DisplayType="SparklineDisplayType.WinLoss"
ValueMemberPath="Value"
LabelMemberPath="Angle">
</IgbSparkline>
</div>
}
</div>
@code {
private List<SparklineItem> Data;
protected override void OnInitialized()
{
this.Data = SparklineData.Generate();
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor Bubble Chart
The Blazor Bubble Chart, or Bubble Graph, is used to show data comprising of three numeric values. Two of the values are plotted as an intersecting point using a Cartesian (X, Y) coordinate system, and the third value is rendered as the diameter size of the point. This gives the Bubble Chart its name - a visualization of varying sized bubbles along the X and Y coordinates of the plot. The Blazor Bubble Chart is used to show relationships of data correlations with the data value differences rendered by size. You can also use a fourth data dimension, typically color, to further differentiate the values in your Bubble chart. Learn more about our bubble chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartScatterModule),
typeof(IgbDataChartScatterCoreModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}cs// NOTE this file contains multiple data sources:
// Data Source #1
using System;
using System.Collections.Generic;
public class CountryStatsAfricaItem
{
public string Code { get; set; }
public double Population { get; set; }
public double WorkedHours { get; set; }
public double GDP { get; set; }
public string Name { get; set; }
}
public class CountryStatsAfrica
: List<CountryStatsAfricaItem>
{
public CountryStatsAfrica()
{
this.Add(new CountryStatsAfricaItem() { Code = @"DZA", Population = 39728000, WorkedHours = 47.5, GDP = 13725, Name = @"Algeria" });
this.Add(new CountryStatsAfricaItem() { Code = @"AGO", Population = 27884000, WorkedHours = 39.8, GDP = 6228, Name = @"Angola" });
this.Add(new CountryStatsAfricaItem() { Code = @"BEN", Population = 10576000, WorkedHours = 43.7, GDP = 1987, Name = @"Benin" });
this.Add(new CountryStatsAfricaItem() { Code = @"BWA", Population = 2121000, WorkedHours = 41.2, GDP = 15357, Name = @"Botswana" });
this.Add(new CountryStatsAfricaItem() { Code = @"BFA", Population = 18111000, WorkedHours = 39.3, GDP = 1596, Name = @"Burkina Faso" });
this.Add(new CountryStatsAfricaItem() { Code = @"BDI", Population = 10160000, WorkedHours = 36.4, GDP = 748, Name = @"Burundi" });
this.Add(new CountryStatsAfricaItem() { Code = @"CMR", Population = 23298000, WorkedHours = 42, GDP = 3289, Name = @"Cameroon" });
this.Add(new CountryStatsAfricaItem() { Code = @"CPV", Population = 525000, WorkedHours = 45, GDP = 5915, Name = @"Cape Verde" });
this.Add(new CountryStatsAfricaItem() { Code = @"CAF", Population = 4493000, WorkedHours = 38, GDP = 622, Name = @"Central African Republic" });
this.Add(new CountryStatsAfricaItem() { Code = @"TCD", Population = 14111000, WorkedHours = 40.4, GDP = 2067, Name = @"Chad" });
this.Add(new CountryStatsAfricaItem() { Code = @"COM", Population = 777000, WorkedHours = 40.1, GDP = 1413, Name = @"Comoros" });
this.Add(new CountryStatsAfricaItem() { Code = @"COG", Population = 4856000, WorkedHours = 38.1, GDP = 5543, Name = @"Congo" });
this.Add(new CountryStatsAfricaItem() { Code = @"CIV", Population = 23226000, WorkedHours = 39.7, GDP = 3242, Name = @"Cote Ivoire" });
this.Add(new CountryStatsAfricaItem() { Code = @"COD", Population = 76245000, WorkedHours = 44, GDP = 812, Name = @"Democratic Republic of Congo" });
this.Add(new CountryStatsAfricaItem() { Code = @"EGY", Population = 92443000, WorkedHours = 39.7, GDP = 10096, Name = @"Egypt" });
this.Add(new CountryStatsAfricaItem() { Code = @"GNQ", Population = 1169000, WorkedHours = 38.8, GDP = 27554, Name = @"Equatorial Guinea" });
this.Add(new CountryStatsAfricaItem() { Code = @"SWZ", Population = 1104000, WorkedHours = 45.7, GDP = 7759, Name = @"Eswatini" });
this.Add(new CountryStatsAfricaItem() { Code = @"ETH", Population = 101000000, WorkedHours = 40.1, GDP = 1533, Name = @"Ethiopia" });
this.Add(new CountryStatsAfricaItem() { Code = @"GAB", Population = 1948000, WorkedHours = 40.5, GDP = 16837, Name = @"Gabon" });
this.Add(new CountryStatsAfricaItem() { Code = @"GMB", Population = 2086000, WorkedHours = 40.3, GDP = 1568, Name = @"Gambia" });
this.Add(new CountryStatsAfricaItem() { Code = @"GHA", Population = 27849000, WorkedHours = 47.6, GDP = 3927, Name = @"Ghana" });
this.Add(new CountryStatsAfricaItem() { Code = @"GIN", Population = 11432000, WorkedHours = 43.4, GDP = 1758, Name = @"Guinea" });
this.Add(new CountryStatsAfricaItem() { Code = @"GNB", Population = 1737000, WorkedHours = 35.1, GDP = 1446, Name = @"Guinea-Bissau" });
this.Add(new CountryStatsAfricaItem() { Code = @"KEN", Population = 47878000, WorkedHours = 43.9, GDP = 2836, Name = @"Kenya" });
this.Add(new CountryStatsAfricaItem() { Code = @"LSO", Population = 2059000, WorkedHours = 47.6, GDP = 2708, Name = @"Lesotho" });
this.Add(new CountryStatsAfricaItem() { Code = @"LBR", Population = 4472000, WorkedHours = 40.3, GDP = 785, Name = @"Liberia" });
this.Add(new CountryStatsAfricaItem() { Code = @"LBY", Population = 6418000, WorkedHours = 42.5, GDP = 14847, Name = @"Libya" });
this.Add(new CountryStatsAfricaItem() { Code = @"MDG", Population = 24234000, WorkedHours = 40.8, GDP = 1377, Name = @"Madagascar" });
this.Add(new CountryStatsAfricaItem() { Code = @"MWI", Population = 16745000, WorkedHours = 44.5, GDP = 1089, Name = @"Malawi" });
this.Add(new CountryStatsAfricaItem() { Code = @"MLI", Population = 17439000, WorkedHours = 40.6, GDP = 1919, Name = @"Mali" });
this.Add(new CountryStatsAfricaItem() { Code = @"MRT", Population = 4046000, WorkedHours = 45.9, GDP = 3602, Name = @"Mauritania" });
this.Add(new CountryStatsAfricaItem() { Code = @"MUS", Population = 1259000, WorkedHours = 44.4, GDP = 18864, Name = @"Mauritius" });
this.Add(new CountryStatsAfricaItem() { Code = @"MAR", Population = 34664000, WorkedHours = 39.6, GDP = 7297, Name = @"Morocco" });
this.Add(new CountryStatsAfricaItem() { Code = @"MOZ", Population = 27042000, WorkedHours = 46.7, GDP = 1118, Name = @"Mozambique" });
this.Add(new CountryStatsAfricaItem() { Code = @"NAM", Population = 2315000, WorkedHours = 43.1, GDP = 9975, Name = @"Namibia" });
this.Add(new CountryStatsAfricaItem() { Code = @"NER", Population = 20002000, WorkedHours = 45, GDP = 908, Name = @"Niger" });
this.Add(new CountryStatsAfricaItem() { Code = @"NGA", Population = 181000000, WorkedHours = 32.76, GDP = 5671, Name = @"Nigeria" });
this.Add(new CountryStatsAfricaItem() { Code = @"RWA", Population = 11369000, WorkedHours = 46.3, GDP = 1731, Name = @"Rwanda" });
this.Add(new CountryStatsAfricaItem() { Code = @"STP", Population = 199000, WorkedHours = 38.2, GDP = 2948, Name = @"Sao Tome" });
this.Add(new CountryStatsAfricaItem() { Code = @"SEN", Population = 14578000, WorkedHours = 46.8, GDP = 2294, Name = @"Senegal" });
this.Add(new CountryStatsAfricaItem() { Code = @"SYC", Population = 95000, WorkedHours = 39.8, GDP = 24857, Name = @"Seychelles" });
this.Add(new CountryStatsAfricaItem() { Code = @"SLE", Population = 7172000, WorkedHours = 35.4, GDP = 1314, Name = @"Sierra Leone" });
this.Add(new CountryStatsAfricaItem() { Code = @"ZAF", Population = 55386000, WorkedHours = 42.48, GDP = 12378, Name = @"South Africa" });
this.Add(new CountryStatsAfricaItem() { Code = @"SSD", Population = 10716000, WorkedHours = 39.3, GDP = 1875, Name = @"South Sudan" });
this.Add(new CountryStatsAfricaItem() { Code = @"SDN", Population = 38903000, WorkedHours = 36.3, GDP = 4290, Name = @"Sudan" });
this.Add(new CountryStatsAfricaItem() { Code = @"TZA", Population = 51483000, WorkedHours = 38, GDP = 2491, Name = @"Tanzania" });
this.Add(new CountryStatsAfricaItem() { Code = @"TGO", Population = 7323000, WorkedHours = 38.8, GDP = 1351, Name = @"Togo" });
this.Add(new CountryStatsAfricaItem() { Code = @"TUN", Population = 11180000, WorkedHours = 35.2, GDP = 10766, Name = @"Tunisia" });
this.Add(new CountryStatsAfricaItem() { Code = @"UGA", Population = 38225000, WorkedHours = 38.6, GDP = 1666, Name = @"Uganda" });
this.Add(new CountryStatsAfricaItem() { Code = @"ZMB", Population = 15879000, WorkedHours = 46.6, GDP = 3627, Name = @"Zambia" });
this.Add(new CountryStatsAfricaItem() { Code = @"ZWE", Population = 13815000, WorkedHours = 41.4, GDP = 1912, Name = @"Zimbabwe" });
}
}
// Data Source #2
using System;
using System.Collections.Generic;
public class CountryStatsEuropeItem
{
public string Code { get; set; }
public double Population { get; set; }
public double WorkedHours { get; set; }
public double GDP { get; set; }
public string Name { get; set; }
}
public class CountryStatsEurope
: List<CountryStatsEuropeItem>
{
public CountryStatsEurope()
{
this.Add(new CountryStatsEuropeItem() { Code = @"ALB", Population = 2891000, WorkedHours = 41, GDP = 10970, Name = @"Albania" });
this.Add(new CountryStatsEuropeItem() { Code = @"AUT", Population = 8679000, WorkedHours = 30.75, GDP = 44305, Name = @"Austria" });
this.Add(new CountryStatsEuropeItem() { Code = @"BLR", Population = 9439000, WorkedHours = 43.5, GDP = 17230, Name = @"Belarus" });
this.Add(new CountryStatsEuropeItem() { Code = @"BEL", Population = 11288000, WorkedHours = 29.7, GDP = 41708, Name = @"Belgium" });
this.Add(new CountryStatsEuropeItem() { Code = @"BIH", Population = 3429000, WorkedHours = 46.5, GDP = 10932, Name = @"Bosnia" });
this.Add(new CountryStatsEuropeItem() { Code = @"BGR", Population = 7200000, WorkedHours = 31.62, GDP = 17000, Name = @"Bulgaria" });
this.Add(new CountryStatsEuropeItem() { Code = @"HRV", Population = 4233000, WorkedHours = 35.15, GDP = 20984, Name = @"Croatia" });
this.Add(new CountryStatsEuropeItem() { Code = @"CYP", Population = 1161000, WorkedHours = 34.42, GDP = 30549, Name = @"Cyprus" });
this.Add(new CountryStatsEuropeItem() { Code = @"CZE", Population = 10601000, WorkedHours = 33.77, GDP = 30605, Name = @"Czechia" });
this.Add(new CountryStatsEuropeItem() { Code = @"DNK", Population = 5689000, WorkedHours = 27.16, GDP = 45459, Name = @"Denmark" });
this.Add(new CountryStatsEuropeItem() { Code = @"EST", Population = 1315000, WorkedHours = 35.61, GDP = 27550, Name = @"Estonia" });
this.Add(new CountryStatsEuropeItem() { Code = @"FIN", Population = 5481000, WorkedHours = 31.48, GDP = 38942, Name = @"Finland" });
this.Add(new CountryStatsEuropeItem() { Code = @"FRA", Population = 64453000, WorkedHours = 29.03, GDP = 37766, Name = @"France" });
this.Add(new CountryStatsEuropeItem() { Code = @"DEU", Population = 81787000, WorkedHours = 26.31, GDP = 43938, Name = @"Germany" });
this.Add(new CountryStatsEuropeItem() { Code = @"GRC", Population = 10660000, WorkedHours = 39.06, GDP = 24170, Name = @"Greece" });
this.Add(new CountryStatsEuropeItem() { Code = @"HUN", Population = 9778000, WorkedHours = 36.99, GDP = 25034, Name = @"Hungary" });
this.Add(new CountryStatsEuropeItem() { Code = @"ISL", Population = 330000, WorkedHours = 29.02, GDP = 43048, Name = @"Iceland" });
this.Add(new CountryStatsEuropeItem() { Code = @"IRL", Population = 4652000, WorkedHours = 33.47, GDP = 60818, Name = @"Ireland" });
this.Add(new CountryStatsEuropeItem() { Code = @"ITA", Population = 60578000, WorkedHours = 33.04, GDP = 34302, Name = @"Italy" });
this.Add(new CountryStatsEuropeItem() { Code = @"LVA", Population = 1998000, WorkedHours = 36.57, GDP = 23019, Name = @"Latvia" });
this.Add(new CountryStatsEuropeItem() { Code = @"LTU", Population = 2932000, WorkedHours = 35.76, GDP = 27046, Name = @"Lithuania" });
this.Add(new CountryStatsEuropeItem() { Code = @"LUX", Population = 567000, WorkedHours = 29.25, GDP = 94089, Name = @"Luxembourg" });
this.Add(new CountryStatsEuropeItem() { Code = @"MLT", Population = 434000, WorkedHours = 37.78, GDP = 34087, Name = @"Malta" });
this.Add(new CountryStatsEuropeItem() { Code = @"MDA", Population = 4071000, WorkedHours = 41, GDP = 4747, Name = @"Moldova" });
this.Add(new CountryStatsEuropeItem() { Code = @"MNE", Population = 627000, WorkedHours = 47.2, GDP = 15290, Name = @"Montenegro" });
this.Add(new CountryStatsEuropeItem() { Code = @"NLD", Population = 16938000, WorkedHours = 27.38, GDP = 46494, Name = @"Netherlands" });
this.Add(new CountryStatsEuropeItem() { Code = @"MKD", Population = 2079000, WorkedHours = 36.6, GDP = 12760, Name = @"North Macedonia" });
this.Add(new CountryStatsEuropeItem() { Code = @"NOR", Population = 5200000, WorkedHours = 27.36, GDP = 64008, Name = @"Norway" });
this.Add(new CountryStatsEuropeItem() { Code = @"POL", Population = 38034000, WorkedHours = 39.4, GDP = 25300, Name = @"Poland" });
this.Add(new CountryStatsEuropeItem() { Code = @"PRT", Population = 10368000, WorkedHours = 36.06, GDP = 26608, Name = @"Portugal" });
this.Add(new CountryStatsEuropeItem() { Code = @"ROU", Population = 19925000, WorkedHours = 34.34, GDP = 20556, Name = @"Romania" });
this.Add(new CountryStatsEuropeItem() { Code = @"RUS", Population = 145000000, WorkedHours = 38.04, GDP = 24517, Name = @"Russia" });
this.Add(new CountryStatsEuropeItem() { Code = @"SMR", Population = 33000, WorkedHours = 40.1, GDP = 56372, Name = @"San Marino" });
this.Add(new CountryStatsEuropeItem() { Code = @"SRB", Population = 8877000, WorkedHours = 46.5, GDP = 13278, Name = @"Serbia" });
this.Add(new CountryStatsEuropeItem() { Code = @"SVK", Population = 5436000, WorkedHours = 33.73, GDP = 28309, Name = @"Slovakia" });
this.Add(new CountryStatsEuropeItem() { Code = @"SVN", Population = 2071000, WorkedHours = 32.46, GDP = 29038, Name = @"Slovenia" });
this.Add(new CountryStatsEuropeItem() { Code = @"ESP", Population = 46672000, WorkedHours = 32.68, GDP = 32291, Name = @"Spain" });
this.Add(new CountryStatsEuropeItem() { Code = @"SWE", Population = 9765000, WorkedHours = 30.96, GDP = 45679, Name = @"Sweden" });
this.Add(new CountryStatsEuropeItem() { Code = @"CHE", Population = 8297000, WorkedHours = 30.57, GDP = 57264, Name = @"Switzerland" });
this.Add(new CountryStatsEuropeItem() { Code = @"UKR", Population = 44922000, WorkedHours = 38.6, GDP = 7465, Name = @"Ukraine" });
this.Add(new CountryStatsEuropeItem() { Code = @"GBR", Population = 65860000, WorkedHours = 32.1, GDP = 38839, Name = @"United Kingdom" });
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Total Population of Selected Countries
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbDataChart
Name="chart"
@ref="chart">
<IgbNumericXAxis
Name="xAxis"
@ref="xAxis"
IsLogarithmic="true"
AbbreviateLargeNumbers="true"
Title="Population">
</IgbNumericXAxis>
<IgbNumericYAxis
Name="yAxis"
@ref="yAxis"
Title="GDP per Capita"
MaximumValue="1000000"
TitleLeftMargin="10"
IsLogarithmic="true"
AbbreviateLargeNumbers="true">
</IgbNumericYAxis>
<IgbBubbleSeries
Name="bubbleSeries1"
@ref="bubbleSeries1"
Title="African Countries"
XAxisName="xAxis"
YAxisName="yAxis"
XMemberPath="Population"
YMemberPath="GDP"
RadiusMemberPath="WorkedHours"
XMemberAsLegendLabel="Population"
YMemberAsLegendLabel="GDP"
RadiusMemberAsLegendLabel="Work Hours"
DataSource="CountryStatsAfrica"
MarkerType="MarkerType.Circle"
ShowDefaultTooltip="true"
RadiusScale="SizeScale1">
</IgbBubbleSeries>
<IgbBubbleSeries
Name="bubbleSeries2"
@ref="bubbleSeries2"
Title="European Countries"
XAxisName="xAxis"
YAxisName="yAxis"
XMemberPath="Population"
YMemberPath="GDP"
RadiusMemberPath="WorkedHours"
XMemberAsLegendLabel="Population"
YMemberAsLegendLabel="GDP"
RadiusMemberAsLegendLabel="Work Hours"
DataSource="CountryStatsEurope"
MarkerType="MarkerType.Circle"
ShowDefaultTooltip="true"
RadiusScale="SizeScale2">
</IgbBubbleSeries>
<IgbDataToolTipLayer
Name="dataToolTipLayer"
@ref="dataToolTipLayer"
ValueRowMarginTop="1"
LabelTextMarginTop="1"
TitleTextMarginTop="1"
UnitsTextMarginTop="1"
ValueRowMarginBottom="1"
LabelTextMarginBottom="1"
TitleTextMarginBottom="1"
UnitsTextMarginBottom="1"
UnitsTextMarginRight="5"
ValueTextMarginLeft="10"
LabelTextMarginLeft="1"
LayoutMode="DataLegendLayoutMode.Vertical">
</IgbDataToolTipLayer>
</IgbDataChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var bubbleSeries1 = this.bubbleSeries1;
var bubbleSeries2 = this.bubbleSeries2;
var dataToolTipLayer = this.dataToolTipLayer;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbDataChart chart;
private IgbNumericXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbBubbleSeries bubbleSeries1;
private IgbSizeScale _sizeScale1 = null;
public IgbSizeScale SizeScale1
{
get
{
if (this._sizeScale1 == null)
{
var sizeScale1 = new IgbSizeScale();
sizeScale1.IsLogarithmic = false;
sizeScale1.MinimumValue = 10;
sizeScale1.MaximumValue = 80;
this._sizeScale1 = sizeScale1;
}
return this._sizeScale1;
}
}
private IgbBubbleSeries bubbleSeries2;
private IgbSizeScale _sizeScale2 = null;
public IgbSizeScale SizeScale2
{
get
{
if (this._sizeScale2 == null)
{
var sizeScale2 = new IgbSizeScale();
sizeScale2.IsLogarithmic = false;
sizeScale2.MinimumValue = 10;
sizeScale2.MaximumValue = 80;
this._sizeScale2 = sizeScale2;
}
return this._sizeScale2;
}
}
private IgbDataToolTipLayer dataToolTipLayer;
private CountryStatsAfrica _countryStatsAfrica = null;
public CountryStatsAfrica CountryStatsAfrica
{
get
{
if (_countryStatsAfrica == null)
{
_countryStatsAfrica = new CountryStatsAfrica();
}
return _countryStatsAfrica;
}
}
private CountryStatsEurope _countryStatsEurope = null;
public CountryStatsEurope CountryStatsEurope
{
get
{
if (_countryStatsEurope == null)
{
_countryStatsEurope = new CountryStatsEurope();
}
return _countryStatsEurope;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Financial / Stock Chart
The Blazor Financial or Stock Chart, is a composite visualization that renders stock data and financial data in a time-series chart that includes interactive visual elements in a toolbar like day / week / month filters, chart type selection, volume type selection, indicators selection and trends lines selection. Designed for customization, the Blazor Stock Chart can be customized in any way to give an easier visualization and interpretation of your data. The financial chart renders the date-time data along the X-Axis (bottom labels) and shows fields like Open, High, Low and Close volumes. The type of chart to render the Time-Series data can be Bar, Candle, Column, or Line. Learn more about our stock chart.
Blazor Column Chart
The Blazor Column Chart, or Column Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by vertical bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the top to bottom of the chart towards the values of data points. Learn more about our column chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class HighestGrossingMoviesItem
{
public string Franchise { get; set; }
public double TotalRevenue { get; set; }
public double HighestGrossing { get; set; }
}
public class HighestGrossingMovies
: List<HighestGrossingMoviesItem>
{
public HighestGrossingMovies()
{
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Marvel Universe", TotalRevenue = 22.55, HighestGrossing = 2.8 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Star Wars", TotalRevenue = 10.32, HighestGrossing = 2.07 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Harry Potter", TotalRevenue = 9.19, HighestGrossing = 1.34 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Avengers", TotalRevenue = 7.76, HighestGrossing = 2.8 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"Spider Man", TotalRevenue = 7.22, HighestGrossing = 1.28 });
this.Add(new HighestGrossingMoviesItem() { Franchise = @"James Bond", TotalRevenue = 7.12, HighestGrossing = 1.11 });
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Highest Grossing Movie Franchises
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.Column"
DataSource="HighestGrossingMovies"
XAxisInterval="1"
YAxisTitle="Billions of U.S. Dollars"
YAxisTitleLeftMargin="10"
YAxisTitleRightMargin="5"
YAxisLabelLeftMargin="0"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
IsCategoryHighlightingEnabled="false"
CrosshairsDisplayMode="CrosshairsDisplayMode.None">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbCategoryChart chart;
private HighestGrossingMovies _highestGrossingMovies = null;
public HighestGrossingMovies HighestGrossingMovies
{
get
{
if (_highestGrossingMovies == null)
{
_highestGrossingMovies = new HighestGrossingMovies();
}
return _highestGrossingMovies;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Composite Chart
The Blazor Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis. Learn more about our composite chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbCalloutLayerModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbLegendModule)
);
await builder.Build().RunAsync();
}
}
}csusing System.Collections.Generic;
namespace Infragistics.Samples
{
public class CompanyBudgetInfoWithFormatting
{
public string Date { get; set; }
public double Revenue { get; set; }
public double Expenses { get; set; }
public double RevenueX { get; set; }
public double ExpensesX { get; set; }
public double Income { get; set; }
public double IncomePerRevenue { get; set; }
public string FormattedRevenue { get; set; }
public string FormattedIncome { get; set; }
public string FormattedExpenses { get; set; }
public string FormattedProfit { get; set; }
}
public class CompanyBudgetDataWithFormatting : List<CompanyBudgetInfoWithFormatting>
{
public string FormatNumber(double num)
{
var ret = num;
if (num >= 1000000) return (num / 1000000.0).ToString("0") + "M";
if (num >= 1000) return (num / 1000.0).ToString("0") + "K";
return ret.ToString().Replace(@"/\B(?=(\d{3})+(?!\d))/g", ",");
}
public CompanyBudgetDataWithFormatting()
{
Add(new CompanyBudgetInfoWithFormatting { Date = "Jan 1, 2019", Revenue = 16914, Expenses = 10183 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Mar 1, 2019", Revenue = 15077, Expenses = 12813 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Jun 1, 2019", Revenue = 16886, Expenses = 14476 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Sep 1, 2019", Revenue = 17652, Expenses = 11705 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Jan 1, 2020", Revenue = 21082, Expenses = 14044 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Mar 1, 2020", Revenue = 17737, Expenses = 12803 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Jun 1, 2020", Revenue = 18687, Expenses = 13677 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Sep 1, 2020", Revenue = 21470, Expenses = 13717 });
Add(new CompanyBudgetInfoWithFormatting { Date = "Jan 1, 2021", Revenue = 28072, Expenses = 17133 });
var i = 0;
foreach (var item in this)
{
item.Revenue = item.Revenue * 1000;
item.Expenses = item.Expenses * 1000;
item.Income = item.Revenue - item.Expenses;
item.IncomePerRevenue = (item.Income / item.Revenue * 100);
// calculating x-offset for callouts
item.RevenueX = i;
item.ExpensesX = i;
// formatting values for callouts
item.FormattedRevenue = "$" + FormatNumber(item.Revenue);
item.FormattedIncome = "$" + FormatNumber(item.Income);
item.FormattedExpenses = "$" + FormatNumber(item.Expenses);
item.FormattedProfit = item.IncomePerRevenue + "%";
i++;
}
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options vertical">
<span class="legend-title">Facebook Statement of Income 2019-2020</span>
<div class="legend">
<IgbLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
</div>
</div>
<div class="container vertical">
<IgbDataChart Height="100%" Width="100%" Legend="Legend"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false">
<IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Date" Overlap="0" Gap="0.1" UseClusteringMode="true"/>
<IgbNumericYAxis Name="yAxis1" AbbreviateLargeNumbers="true" Title="In Millions of U.S. Dollars"
MinimumValue="0" MaximumValue="30000000" TitleLeftMargin="5" TitleRightMargin="0"/>
<IgbNumericYAxis Name="yAxis2" AbbreviateLargeNumbers="true" Title="Percentage" MajorStrokeThickness="0"
MinimumValue="0" MaximumValue="160" LabelLocation="AxisLabelsLocation.OutsideRight"
LabelHorizontalAlignment="HorizontalAlignment.Left"/>
<IgbColumnSeries @ref="@RevenueSeries" XAxisName="xAxis" YAxisName="yAxis1" DataSource="Data"
ValueMemberPath="Revenue"
Title="Revenue" MarkerType="MarkerType.Hidden"/>
<IgbColumnSeries @ref="@ExpenseSeries" XAxisName="xAxis" YAxisName="yAxis1" DataSource="Data"
ValueMemberPath="Expenses"
Title="Expenses" MarkerType="MarkerType.Hidden"/>
<IgbSplineAreaSeries @ref="@IncomeSeries" XAxisName="xAxis" YAxisName="yAxis2" DataSource="Data"
ValueMemberPath="IncomePerRevenue"
Title="Income / Revenue %" MarkerType="MarkerType.Circle"/>
<IgbCalloutLayer DataSource="Data" IsAutoCalloutBehaviorEnabled="false" XMemberPath="RevenueX" YMemberPath="Revenue" LabelMemberPath="FormattedRevenue"
TargetSeries="@RevenueSeries"
UseValueForAutoCalloutLabels="false"
CalloutLeaderBrush="Transparent" CalloutTextColor="Black"
CalloutBackground = "Transparent"
CalloutPositionPadding="-5"/>
<IgbCalloutLayer DataSource="Data" IsAutoCalloutBehaviorEnabled="false" XMemberPath="ExpensesX" YMemberPath="Expenses" LabelMemberPath="FormattedExpenses"
TargetSeries="@ExpenseSeries"
UseValueForAutoCalloutLabels="false"
CalloutLeaderBrush="Transparent" CalloutTextColor="Black"
CalloutBackground = "Transparent"
CalloutPositionPadding="-5"/>
<IgbCalloutLayer IsAutoCalloutBehaviorEnabled="true" TargetSeries="@IncomeSeries"
UseValueForAutoCalloutLabels="true" ContentMemberPath="IncomePerRevenue"
CalloutLeaderBrush="Transparent" CalloutTextColor="Black"
CalloutBackground = "LightGray" AutoCalloutLabelPrecision="1"/>
</IgbDataChart>
</div>
</div>
@code {
private IgbLegend _legend;
private IgbLegend Legend
{
get { return _legend; }
set { _legend = value; StateHasChanged(); }
}
private IgbColumnSeries _RevenueSeries;
public IgbColumnSeries RevenueSeries
{
get { return _RevenueSeries; }
set { _RevenueSeries = value; StateHasChanged(); }
}
private IgbColumnSeries _ExpenseSeries;
public IgbColumnSeries ExpenseSeries
{
get { return _ExpenseSeries; }
set { _ExpenseSeries = value; StateHasChanged(); }
}
private IgbSplineAreaSeries _IncomeSeries;
public IgbSplineAreaSeries IncomeSeries
{
get { return _IncomeSeries; }
set { _IncomeSeries = value; StateHasChanged(); }
}
private List<CompanyBudgetInfoWithFormatting> Data = new CompanyBudgetDataWithFormatting();
}razorfunction onColumnChartStylingMarkerTemplate(o, e) {
let style = { text: "black" };
let size = 12;
return {
measure: function (measureInfo) {
const data = measureInfo.data;
const context = measureInfo.context;
let value = "0.00";
let item = data.item;
if (item != null) {
value = item.Solar.toString();
}
const height = context.measureText("M").width;
const width = context.measureText(value).width;
measureInfo.width = width;
measureInfo.height = height + size;
},
render: function (renderInfo) {
const item = renderInfo.data.item;
const series = renderInfo.data.series;
const valuePath = series.valueColumn.propertyName;
var value = 0;
switch (valuePath) {
case "Solar":
value = item.Solar;
break;
case "Coal":
value = item.Coal;
break;
case "Hydro":
value = item.Hydro;
break;
case "Wind":
value = item.Wind;
break;
case "Nuclear":
value = item.Nuclear;
break;
}
const ctx = renderInfo.context;
let x = renderInfo.xPosition;
let y = renderInfo.yPosition;
if (renderInfo.isHitTestRender) {
ctx.fillStyle = renderInfo.data.actualItemBrush.fill;
let width = renderInfo.availableWidth;
let height = renderInfo.availableHeight;
ctx.fillRect(x - (width / 2), y - (height), renderInfo.availableWidth, renderInfo.availableHeight);
return;
}
let xOffset = 20;
let yOffset = 10;
ctx.font = '8pt Verdana';
ctx.textBaseline = 'top';
ctx.fillStyle = style.text;
if (value < 0) {
ctx.fillText(value + "%", x - (xOffset / 2), y + (yOffset ));
}
else {
ctx.fillText(value + "%", x - (xOffset / 2), y - (yOffset * 2));
}
}
}
}
igRegisterScript("onColumnChartStylingMarkerTemplate", onColumnChartStylingMarkerTemplate, true);js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor Polar Chart
The Blazor Polar Area Chart or Polar Graph belongs to a group of polar charts and has a shape of a filled polygon which vertices or corners are located at the polar (angle/radius) coordinates of data points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Chart but wraps data points around a circle rather than stretching them horizontally. Like with other series types, multiple Polar Area Charts can be plotted in the same data chart and they can be overlaid on each other to show differences and similarities between data sets. Learn more about our polar chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartPolarModule),
typeof(IgbDataChartPolarCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class BoatSailingDataItem
{
public double Direction { get; set; }
public double BoatSpeed { get; set; }
public double WindSpeed { get; set; }
}
public class BoatSailingData
: List<BoatSailingDataItem>
{
public BoatSailingData()
{
this.Add(new BoatSailingDataItem()
{
Direction = 0,
BoatSpeed = 70,
WindSpeed = 90
});
this.Add(new BoatSailingDataItem()
{
Direction = 45,
BoatSpeed = 35,
WindSpeed = 65
});
this.Add(new BoatSailingDataItem()
{
Direction = 90,
BoatSpeed = 25,
WindSpeed = 45
});
this.Add(new BoatSailingDataItem()
{
Direction = 135,
BoatSpeed = 15,
WindSpeed = 25
});
this.Add(new BoatSailingDataItem()
{
Direction = 180,
BoatSpeed = 0,
WindSpeed = 0
});
this.Add(new BoatSailingDataItem()
{
Direction = 225,
BoatSpeed = 15,
WindSpeed = 25
});
this.Add(new BoatSailingDataItem()
{
Direction = 270,
BoatSpeed = 25,
WindSpeed = 45
});
this.Add(new BoatSailingDataItem()
{
Direction = 315,
BoatSpeed = 35,
WindSpeed = 65
});
this.Add(new BoatSailingDataItem()
{
Direction = 360,
BoatSpeed = 70,
WindSpeed = 90
});
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Wind Speed vs Boat Speed
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbDataChart
Name="chart"
@ref="chart"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false">
<IgbNumericAngleAxis
Name="angleAxis"
@ref="angleAxis"
StartAngleOffset="-90"
Interval="30"
MinimumValue="0"
MaximumValue="360">
</IgbNumericAngleAxis>
<IgbNumericRadiusAxis
Name="radiusAxis"
@ref="radiusAxis"
RadiusExtentScale="0.9"
InnerRadiusExtentScale="0.1"
Interval="25"
MinimumValue="0"
MaximumValue="100">
</IgbNumericRadiusAxis>
<IgbPolarLineSeries
Name="PolarLineSeries1"
@ref="polarLineSeries1"
DataSource="BoatSailingData"
AngleAxisName="angleAxis"
RadiusAxisName="radiusAxis"
AngleMemberPath="Direction"
RadiusMemberPath="WindSpeed"
ShowDefaultTooltip="false"
Thickness="1"
Title="Wind Speed"
MarkerType="MarkerType.Circle">
</IgbPolarLineSeries>
<IgbPolarLineSeries
Name="PolarLineSeries2"
@ref="polarLineSeries2"
DataSource="BoatSailingData"
AngleAxisName="angleAxis"
RadiusAxisName="radiusAxis"
AngleMemberPath="Direction"
RadiusMemberPath="BoatSpeed"
ShowDefaultTooltip="false"
Thickness="1"
Title="Boat Speed"
MarkerType="MarkerType.Circle">
</IgbPolarLineSeries>
<IgbDataToolTipLayer
Name="dataToolTipLayer"
@ref="dataToolTipLayer">
</IgbDataToolTipLayer>
</IgbDataChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var angleAxis = this.angleAxis;
var radiusAxis = this.radiusAxis;
var polarLineSeries1 = this.polarLineSeries1;
var polarLineSeries2 = this.polarLineSeries2;
var dataToolTipLayer = this.dataToolTipLayer;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbDataChart chart;
private IgbNumericAngleAxis angleAxis;
private IgbNumericRadiusAxis radiusAxis;
private IgbPolarLineSeries polarLineSeries1;
private IgbPolarLineSeries polarLineSeries2;
private IgbDataToolTipLayer dataToolTipLayer;
private BoatSailingData _boatSailingData = null;
public BoatSailingData BoatSailingData
{
get
{
if (_boatSailingData == null)
{
_boatSailingData = new BoatSailingData();
}
return _boatSailingData;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Scatter Chart
The Blazor Scatter Chart, or Scatter Graph, is used to show the relationship between two values using a Cartesian (X, Y) coordinate system to plot data. Each data point is rendered as the intersecting point of the data value on the X and Y Axis. Scatter charts draw attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results and they are often used to plot scientific and statistical data. The Blazor Scatter chart organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis. Learn more about our scatter chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartScatterModule),
typeof(IgbDataChartScatterCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs// NOTE this file contains multiple data sources:
// Data Source #1
using System;
using System.Collections.Generic;
public class CountryDemographicAfricanItem
{
public double Population { get; set; }
public double BirthRate { get; set; }
public double DeathRate { get; set; }
public string Name { get; set; }
}
public class CountryDemographicAfrican
: List<CountryDemographicAfricanItem>
{
public CountryDemographicAfrican()
{
this.Add(new CountryDemographicAfricanItem() { Population = 39728000, BirthRate = 23.9, DeathRate = 4.77, Name = @"Algeria" });
this.Add(new CountryDemographicAfricanItem() { Population = 27884000, BirthRate = 42.32, DeathRate = 8.68, Name = @"Angola" });
this.Add(new CountryDemographicAfricanItem() { Population = 10576000, BirthRate = 37.43, DeathRate = 9.32, Name = @"Benin" });
this.Add(new CountryDemographicAfricanItem() { Population = 2121000, BirthRate = 24.14, DeathRate = 7.02, Name = @"Botswana" });
this.Add(new CountryDemographicAfricanItem() { Population = 18111000, BirthRate = 39.44, DeathRate = 8.82, Name = @"Burkina Faso" });
this.Add(new CountryDemographicAfricanItem() { Population = 10160000, BirthRate = 42.66, DeathRate = 11.03, Name = @"Burundi" });
this.Add(new CountryDemographicAfricanItem() { Population = 23298000, BirthRate = 36.84, DeathRate = 10.35, Name = @"Cameroon" });
this.Add(new CountryDemographicAfricanItem() { Population = 525000, BirthRate = 21.14, DeathRate = 5.61, Name = @"Cape Verde" });
this.Add(new CountryDemographicAfricanItem() { Population = 4493000, BirthRate = 36.11, DeathRate = 14.01, Name = @"C.A.R." });
this.Add(new CountryDemographicAfricanItem() { Population = 14111000, BirthRate = 43.86, DeathRate = 13.22, Name = @"Chad" });
this.Add(new CountryDemographicAfricanItem() { Population = 777000, BirthRate = 33.33, DeathRate = 7.49, Name = @"Comoros" });
this.Add(new CountryDemographicAfricanItem() { Population = 4856000, BirthRate = 35.23, DeathRate = 7.56, Name = @"Congo" });
this.Add(new CountryDemographicAfricanItem() { Population = 23226000, BirthRate = 37.1, DeathRate = 12.54, Name = @"Cote Ivoire" });
this.Add(new CountryDemographicAfricanItem() { Population = 76245000, BirthRate = 42.81, DeathRate = 10.19, Name = @"DCongo" });
this.Add(new CountryDemographicAfricanItem() { Population = 914000, BirthRate = 23.35, DeathRate = 8.37, Name = @"Djibouti" });
this.Add(new CountryDemographicAfricanItem() { Population = 92443000, BirthRate = 27.2, DeathRate = 5.96, Name = @"Egypt" });
this.Add(new CountryDemographicAfricanItem() { Population = 1169000, BirthRate = 34.64, DeathRate = 10.34, Name = @"Equatorial Guinea" });
this.Add(new CountryDemographicAfricanItem() { Population = 3343000, BirthRate = 32.83, DeathRate = 7.07, Name = @"Eritrea" });
this.Add(new CountryDemographicAfricanItem() { Population = 100835000, BirthRate = 32.3, DeathRate = 7, Name = @"Ethiopia" });
this.Add(new CountryDemographicAfricanItem() { Population = 1948000, BirthRate = 30.09, DeathRate = 7.82, Name = @"Gabon" });
this.Add(new CountryDemographicAfricanItem() { Population = 2086000, BirthRate = 39.99, DeathRate = 8.2, Name = @"Gambia" });
this.Add(new CountryDemographicAfricanItem() { Population = 27849000, BirthRate = 31.56, DeathRate = 8.31, Name = @"Ghana" });
this.Add(new CountryDemographicAfricanItem() { Population = 11432000, BirthRate = 36.36, DeathRate = 9.58, Name = @"Guinea" });
this.Add(new CountryDemographicAfricanItem() { Population = 1737000, BirthRate = 37.15, DeathRate = 10.78, Name = @"Guinea-Bissau" });
this.Add(new CountryDemographicAfricanItem() { Population = 47878000, BirthRate = 31.78, DeathRate = 5.84, Name = @"Kenya" });
this.Add(new CountryDemographicAfricanItem() { Population = 2059000, BirthRate = 28.16, DeathRate = 12.92, Name = @"Lesotho" });
this.Add(new CountryDemographicAfricanItem() { Population = 4472000, BirthRate = 34.72, DeathRate = 8.12, Name = @"Liberia" });
this.Add(new CountryDemographicAfricanItem() { Population = 6418000, BirthRate = 20.19, DeathRate = 5.2, Name = @"Libya" });
this.Add(new CountryDemographicAfricanItem() { Population = 24234000, BirthRate = 33.4, DeathRate = 6.48, Name = @"Madagascar" });
this.Add(new CountryDemographicAfricanItem() { Population = 16745000, BirthRate = 37.05, DeathRate = 7.5, Name = @"Malawi" });
this.Add(new CountryDemographicAfricanItem() { Population = 17439000, BirthRate = 43.22, DeathRate = 10.67, Name = @"Mali" });
this.Add(new CountryDemographicAfricanItem() { Population = 4046000, BirthRate = 34.57, DeathRate = 7.96, Name = @"Mauritania" });
this.Add(new CountryDemographicAfricanItem() { Population = 1259000, BirthRate = 10.1, DeathRate = 7.7, Name = @"Mauritius" });
this.Add(new CountryDemographicAfricanItem() { Population = 34664000, BirthRate = 20.4, DeathRate = 5.15, Name = @"Morocco" });
this.Add(new CountryDemographicAfricanItem() { Population = 27042000, BirthRate = 39.36, DeathRate = 10.38, Name = @"Mozambique" });
this.Add(new CountryDemographicAfricanItem() { Population = 2315000, BirthRate = 29.59, DeathRate = 7.46, Name = @"Namibia" });
this.Add(new CountryDemographicAfricanItem() { Population = 20002000, BirthRate = 48.44, DeathRate = 9.94, Name = @"Niger" });
this.Add(new CountryDemographicAfricanItem() { Population = 181136992, BirthRate = 39.37, DeathRate = 12.77, Name = @"Nigeria" });
this.Add(new CountryDemographicAfricanItem() { Population = 11369000, BirthRate = 31.79, DeathRate = 6.13, Name = @"Rwanda" });
this.Add(new CountryDemographicAfricanItem() { Population = 199000, BirthRate = 34.33, DeathRate = 6.81, Name = @"Sao Tome and Principe" });
this.Add(new CountryDemographicAfricanItem() { Population = 14578000, BirthRate = 36.21, DeathRate = 6.07, Name = @"Senegal" });
this.Add(new CountryDemographicAfricanItem() { Population = 95000, BirthRate = 17, DeathRate = 7.5, Name = @"Seychelles" });
this.Add(new CountryDemographicAfricanItem() { Population = 7172000, BirthRate = 35.61, DeathRate = 13.03, Name = @"Sierra Leone" });
this.Add(new CountryDemographicAfricanItem() { Population = 13797000, BirthRate = 43.66, DeathRate = 11.63, Name = @"Somalia" });
this.Add(new CountryDemographicAfricanItem() { Population = 55386000, BirthRate = 21.3, DeathRate = 10.1, Name = @"South Africa" });
this.Add(new CountryDemographicAfricanItem() { Population = 10716000, BirthRate = 36.32, DeathRate = 11.24, Name = @"South Sudan" });
this.Add(new CountryDemographicAfricanItem() { Population = 38903000, BirthRate = 33.32, DeathRate = 7.52, Name = @"Sudan" });
this.Add(new CountryDemographicAfricanItem() { Population = 1104000, BirthRate = 29.27, DeathRate = 9.86, Name = @"Swaziland" });
this.Add(new CountryDemographicAfricanItem() { Population = 51483000, BirthRate = 38.64, DeathRate = 7.02, Name = @"Tanzania" });
this.Add(new CountryDemographicAfricanItem() { Population = 7323000, BirthRate = 34.53, DeathRate = 8.83, Name = @"Togo" });
this.Add(new CountryDemographicAfricanItem() { Population = 11180000, BirthRate = 18.65, DeathRate = 6.36, Name = @"Tunisia" });
this.Add(new CountryDemographicAfricanItem() { Population = 38225000, BirthRate = 42.63, DeathRate = 8.87, Name = @"Uganda" });
this.Add(new CountryDemographicAfricanItem() { Population = 15879000, BirthRate = 38.44, DeathRate = 8, Name = @"Zambia" });
this.Add(new CountryDemographicAfricanItem() { Population = 13815000, BirthRate = 33.94, DeathRate = 8.4, Name = @"Zimbabwe" });
}
}
// Data Source #2
using System;
using System.Collections.Generic;
public class CountryDemographicEuropeItem
{
public double Population { get; set; }
public double BirthRate { get; set; }
public double DeathRate { get; set; }
public string Name { get; set; }
}
public class CountryDemographicEurope
: List<CountryDemographicEuropeItem>
{
public CountryDemographicEurope()
{
this.Add(new CountryDemographicEuropeItem() { Population = 2891000, BirthRate = 11.88, DeathRate = 7.22, Name = @"Albania" });
this.Add(new CountryDemographicEuropeItem() { Population = 8679000, BirthRate = 9.8, DeathRate = 9.6, Name = @"Austria" });
this.Add(new CountryDemographicEuropeItem() { Population = 9439000, BirthRate = 12.5, DeathRate = 12.6, Name = @"Belarus" });
this.Add(new CountryDemographicEuropeItem() { Population = 11288000, BirthRate = 10.8, DeathRate = 9.8, Name = @"Belgium" });
this.Add(new CountryDemographicEuropeItem() { Population = 3429000, BirthRate = 9.12, DeathRate = 10.89, Name = @"Bosnia" });
this.Add(new CountryDemographicEuropeItem() { Population = 7200000, BirthRate = 9.2, DeathRate = 15.3, Name = @"Bulgaria" });
this.Add(new CountryDemographicEuropeItem() { Population = 165000, BirthRate = 9.39, DeathRate = 8.97, Name = @"Channel Islands" });
this.Add(new CountryDemographicEuropeItem() { Population = 4233000, BirthRate = 8.9, DeathRate = 12.9, Name = @"Croatia" });
this.Add(new CountryDemographicEuropeItem() { Population = 1161000, BirthRate = 10.98, DeathRate = 6.84, Name = @"Cyprus" });
this.Add(new CountryDemographicEuropeItem() { Population = 10601000, BirthRate = 10.5, DeathRate = 10.5, Name = @"Czechia" });
this.Add(new CountryDemographicEuropeItem() { Population = 5689000, BirthRate = 10.2, DeathRate = 9.2, Name = @"Denmark" });
this.Add(new CountryDemographicEuropeItem() { Population = 1315000, BirthRate = 10.6, DeathRate = 11.6, Name = @"Estonia" });
this.Add(new CountryDemographicEuropeItem() { Population = 48000, BirthRate = 12.4, DeathRate = 7.7, Name = @"Faeroe Islands" });
this.Add(new CountryDemographicEuropeItem() { Population = 5481000, BirthRate = 10.1, DeathRate = 9.6, Name = @"Finland" });
this.Add(new CountryDemographicEuropeItem() { Population = 64453000, BirthRate = 12, DeathRate = 8.9, Name = @"France" });
this.Add(new CountryDemographicEuropeItem() { Population = 81787000, BirthRate = 9, DeathRate = 11.3, Name = @"Germany" });
this.Add(new CountryDemographicEuropeItem() { Population = 10660000, BirthRate = 8.5, DeathRate = 11.2, Name = @"Greece" });
this.Add(new CountryDemographicEuropeItem() { Population = 9778000, BirthRate = 9.4, DeathRate = 13.4, Name = @"Hungary" });
this.Add(new CountryDemographicEuropeItem() { Population = 330000, BirthRate = 12.5, DeathRate = 6.6, Name = @"Iceland" });
this.Add(new CountryDemographicEuropeItem() { Population = 4652000, BirthRate = 14.1, DeathRate = 6.5, Name = @"Ireland" });
this.Add(new CountryDemographicEuropeItem() { Population = 60578000, BirthRate = 8, DeathRate = 10.7, Name = @"Italy" });
this.Add(new CountryDemographicEuropeItem() { Population = 1998000, BirthRate = 11.1, DeathRate = 14.4, Name = @"Latvia" });
this.Add(new CountryDemographicEuropeItem() { Population = 37000, BirthRate = 8.7, DeathRate = 6.7, Name = @"Liechtenstein" });
this.Add(new CountryDemographicEuropeItem() { Population = 2932000, BirthRate = 10.8, DeathRate = 14.4, Name = @"Lithuania" });
this.Add(new CountryDemographicEuropeItem() { Population = 567000, BirthRate = 10.7, DeathRate = 7, Name = @"Luxembourg" });
this.Add(new CountryDemographicEuropeItem() { Population = 2079000, BirthRate = 11.3, DeathRate = 9.75, Name = @"Macedonia" });
this.Add(new CountryDemographicEuropeItem() { Population = 434000, BirthRate = 10, DeathRate = 8, Name = @"Malta" });
this.Add(new CountryDemographicEuropeItem() { Population = 4071000, BirthRate = 10.52, DeathRate = 11.42, Name = @"Moldova" });
this.Add(new CountryDemographicEuropeItem() { Population = 38000, BirthRate = 8.1, DeathRate = 7.6, Name = @"Monaco" });
this.Add(new CountryDemographicEuropeItem() { Population = 627000, BirthRate = 11.52, DeathRate = 9.8, Name = @"Montenegro" });
this.Add(new CountryDemographicEuropeItem() { Population = 16938000, BirthRate = 10.1, DeathRate = 8.7, Name = @"Netherlands" });
this.Add(new CountryDemographicEuropeItem() { Population = 5200000, BirthRate = 11.3, DeathRate = 7.8, Name = @"Norway" });
this.Add(new CountryDemographicEuropeItem() { Population = 38034000, BirthRate = 9.7, DeathRate = 10.4, Name = @"Poland" });
this.Add(new CountryDemographicEuropeItem() { Population = 10368000, BirthRate = 8.3, DeathRate = 10.5, Name = @"Portugal" });
this.Add(new CountryDemographicEuropeItem() { Population = 19925000, BirthRate = 10, DeathRate = 13.2, Name = @"Romania" });
this.Add(new CountryDemographicEuropeItem() { Population = 144984992, BirthRate = 13.3, DeathRate = 13, Name = @"Russia" });
this.Add(new CountryDemographicEuropeItem() { Population = 33000, BirthRate = 8.2, DeathRate = 7.1, Name = @"San Marino" });
this.Add(new CountryDemographicEuropeItem() { Population = 8877000, BirthRate = 9.3, DeathRate = 14.6, Name = @"Serbia" });
this.Add(new CountryDemographicEuropeItem() { Population = 5436000, BirthRate = 10.3, DeathRate = 9.9, Name = @"Slovakia" });
this.Add(new CountryDemographicEuropeItem() { Population = 2071000, BirthRate = 10, DeathRate = 9.6, Name = @"Slovenia" });
this.Add(new CountryDemographicEuropeItem() { Population = 46672000, BirthRate = 9, DeathRate = 9.1, Name = @"Spain" });
this.Add(new CountryDemographicEuropeItem() { Population = 9765000, BirthRate = 11.7, DeathRate = 9.3, Name = @"Sweden" });
this.Add(new CountryDemographicEuropeItem() { Population = 8297000, BirthRate = 10.5, DeathRate = 8.2, Name = @"Switzerland" });
this.Add(new CountryDemographicEuropeItem() { Population = 44922000, BirthRate = 10.7, DeathRate = 14.9, Name = @"Ukraine" });
this.Add(new CountryDemographicEuropeItem() { Population = 65860000, BirthRate = 11.9, DeathRate = 9.2, Name = @"United Kingdom" });
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Population Statistics for Selected Continents
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbDataChart
Name="chart"
@ref="chart">
<IgbNumericXAxis
Name="xAxis"
@ref="xAxis"
Title="Death Rate (per 1,000 people)"
MinimumValue="5"
MaximumValue="15">
</IgbNumericXAxis>
<IgbNumericYAxis
Name="yAxis"
@ref="yAxis"
Title="Birth Rate (per 1,000 people)"
MinimumValue="0"
MaximumValue="50"
Interval="10">
</IgbNumericYAxis>
<IgbScatterSeries
Name="scatterSeries1"
@ref="scatterSeries1"
Title="Europe"
XAxisName="xAxis"
YAxisName="yAxis"
XMemberPath="DeathRate"
YMemberPath="BirthRate"
DataSource="CountryDemographicEurope"
MarkerType="MarkerType.Circle"
ShowDefaultTooltip="true">
</IgbScatterSeries>
<IgbScatterSeries
Name="scatterSeries2"
@ref="scatterSeries2"
Title="Africa"
XAxisName="xAxis"
YAxisName="yAxis"
XMemberPath="DeathRate"
YMemberPath="BirthRate"
DataSource="CountryDemographicAfrican"
MarkerType="MarkerType.Circle"
ShowDefaultTooltip="true">
</IgbScatterSeries>
</IgbDataChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var scatterSeries1 = this.scatterSeries1;
var scatterSeries2 = this.scatterSeries2;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbDataChart chart;
private IgbNumericXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbScatterSeries scatterSeries1;
private IgbScatterSeries scatterSeries2;
private CountryDemographicEurope _countryDemographicEurope = null;
public CountryDemographicEurope CountryDemographicEurope
{
get
{
if (_countryDemographicEurope == null)
{
_countryDemographicEurope = new CountryDemographicEurope();
}
return _countryDemographicEurope;
}
}
private CountryDemographicAfrican _countryDemographicAfrican = null;
public CountryDemographicAfrican CountryDemographicAfrican
{
get
{
if (_countryDemographicAfrican == null)
{
_countryDemographicAfrican = new CountryDemographicAfrican();
}
return _countryDemographicAfrican;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Shape Chart
The Blazor Shape Charts is a group of chart that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings. Learn more about our shape chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartShapeCoreModule),
typeof(IgbDataChartShapeModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbScatterPolygonSeriesModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@using System.Net.Http.Json
@inject HttpClient Http
<div class="container vertical">
<div class="container vertical">
<div class="options vertical">
<span class="legend-title">Airplane Seating Chart (Polygons)</span>
</div>
<div class="custom-legend">
<div><span style="background: DodgerBlue; "></span><label>First Class</label></div>
<div><span style="background: LimeGreen; "></span><label>Business Class</label></div>
<div><span style="background: Orange; "></span><label>Premium Class</label></div>
<div><span style="background: Red; "></span><label>Economy Class</label></div>
<div><span style="background: Gray; "></span><label>Sold Seat</label> </div>
<div><span style="background: LightGray; "></span><label>Airplane</label> </div>
</div>
@if (AirplaneShape != null && AirplaneSeats != null)
{
<IgbDataChart Height="100%" Width="100%"
SeriesMouseEnterScript="onPolygonSeriesMouseEnter"
IsHorizontalZoomEnabled="true"
IsVerticalZoomEnabled="true">
<IgbNumericXAxis Name="xAxis" MinimumValue="-1000" MaximumValue="1000" Interval="200"></IgbNumericXAxis>
<IgbNumericYAxis Name="yAxis" MinimumValue="-600" MaximumValue="600" Interval="200"></IgbNumericYAxis>
<IgbScatterPolygonSeries XAxisName="xAxis"
YAxisName="yAxis"
DataSource="AirplaneShape"
ShapeMemberPath="Points"
ShowDefaultTooltip="false"
Thickness="0.5"
Brush="LightGray" Outline="Black">
</IgbScatterPolygonSeries>
<IgbScatterPolygonSeries XAxisName="xAxis"
YAxisName="yAxis"
DataSource="AirplaneSeats"
Title="AirplaneSeats"
ShapeMemberPath="Points"
StyleShapeScript="onPolygonShapeStyle">
</IgbScatterPolygonSeries>
</IgbDataChart>
}
</div>
</div>
@code {
private AirplaneSeatInfo[] AirplaneShape;
private AirplaneSeatInfo[] AirplaneSeats;
protected override async Task OnInitializedAsync()
{
var http = new HttpClient();
var shape = "https://static.infragistics.com/xplatform/json/airplane-shape.json";
this.AirplaneShape = await http.GetFromJsonAsync<AirplaneSeatInfo[]>(shape);
var seats = "https://static.infragistics.com/xplatform/json/airplane-seats.json";
this.AirplaneSeats = await http.GetFromJsonAsync<AirplaneSeatInfo[]>(seats);
}
public class AirplaneSeatInfo
{
public string Seat { get; set; }
public string Class { get; set; }
public string Price { get; set; }
public string Status { get; set; }
public List<List<Point>> Points { get; set; }
}
}razorfunction onPolygonShapeStyle(o, e) {
e.shapeOpacity = 1.0;
e.shapeStrokeThickness = 0.5;
e.shapeStroke = 'Black';
var dataItem = e.item;
if (dataItem.Class === 'First') {
e.shapeFill = 'DodgerBlue';
}
if (dataItem.Class === 'Business') {
e.shapeFill = 'LimeGreen';
}
if (dataItem.Class === 'Premium') {
e.shapeFill = 'Orange';
}
if (dataItem.Class === 'Economy') {
e.shapeFill = 'Red';
}
if (dataItem.Status === 'Sold') {
e.shapeFill = 'Gray';
}
}
igRegisterScript("onPolygonShapeStyle", onPolygonShapeStyle, false);
function onPolygonSeriesMouseEnter(o, e) {
if (e.series.title !== "AirplaneSeats") return;
if (e.series.tooltipTemplate === null ||
e.series.tooltipTemplate === undefined) {
e.series.tooltipTemplate = createPolygonSeriesTooltip;
console.log("onPolygonSeriesMouseEnter ");
}
}
igRegisterScript("onPolygonSeriesMouseEnter", onPolygonSeriesMouseEnter, false);
function createPolygonSeriesTooltip(context) {
if (!context) return null;
var dataItem = context.item;
if (!dataItem) return null;
var tooltip = document.createElement("div");
tooltip.className = "ui-tooltip-content";
var itemClass = document.createElement("div");
itemClass.innerHTML = "Class: " + dataItem.Class;
//itemClass.style.color = "black";
tooltip.appendChild(itemClass);
var itemSeat = document.createElement("div");
itemSeat.innerHTML = "Seat: " + dataItem.Seat;
tooltip.appendChild(itemSeat);
var itemPrice = document.createElement("div");
itemPrice.innerHTML = "Price: $" + dataItem.Price;
tooltip.appendChild(itemPrice);
var itemStatus = document.createElement("div");
itemStatus.innerHTML = "Status: " + dataItem.Status;
tooltip.appendChild(itemStatus);
return tooltip;
}js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor Spline Chart
The Blazor Spline Chart, or Spline Graph is a type of category line graph shows the continuous data values represented by points connected by smooth line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. The Blazor Spline chart is identical to the Blazor Spline chart, the only different being the line chart is points connected by straight lines, and the spline chart points are connected by smooth curves. Learn more about our spline chart.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
public string Year { get; set; }
public double Europe { get; set; }
public double China { get; set; }
public double America { get; set; }
}
public class CountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
public CountryRenewableElectricity()
{
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2009",
Europe = 34,
China = 21,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2010",
Europe = 43,
China = 26,
America = 24
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2011",
Europe = 66,
China = 29,
America = 28
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2012",
Europe = 69,
China = 32,
America = 26
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2013",
Europe = 58,
China = 47,
America = 38
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2014",
Europe = 40,
China = 46,
America = 31
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2015",
Europe = 78,
China = 50,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2016",
Europe = 13,
China = 90,
America = 52
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2017",
Europe = 78,
China = 132,
America = 50
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2019",
Europe = 80,
China = 96,
America = 38
});
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.Spline"
DataSource="CountryRenewableElectricity"
YAxisTitle="TWh"
IsTransitionInEnabled="true"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbCategoryChart chart;
private CountryRenewableElectricity _countryRenewableElectricity = null;
public CountryRenewableElectricity CountryRenewableElectricity
{
get
{
if (_countryRenewableElectricity == null)
{
_countryRenewableElectricity = new CountryRenewableElectricity();
}
return _countryRenewableElectricity;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Step Chart
The Blazor Step Chart, or Step Graph, is a category charts that renders a collection of data points connected by continuous vertical and horizontal lines forming a step-like progression. Values are represented on the Y-Axis (left labels) and categories are displayed on the X-Axis (bottom labels). The Blazor Step Line chart emphasizes the amount of change over a period of time or compares multiple items. The Blazor Step Line chart is identical to the Blazor Step Area Chart in all aspects except that the area below the step lines is not filled in. Learn more about our step chart
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
public string Year { get; set; }
public double Europe { get; set; }
public double China { get; set; }
public double America { get; set; }
}
public class CountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
public CountryRenewableElectricity()
{
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2009",
Europe = 34,
China = 21,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2010",
Europe = 43,
China = 26,
America = 24
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2011",
Europe = 66,
China = 29,
America = 28
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2012",
Europe = 69,
China = 32,
America = 26
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2013",
Europe = 58,
China = 47,
America = 38
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2014",
Europe = 40,
China = 46,
America = 31
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2015",
Europe = 78,
China = 50,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2016",
Europe = 13,
China = 90,
America = 52
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2017",
Europe = 78,
China = 132,
America = 50
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2019",
Europe = 80,
China = 96,
America = 38
});
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
ChartType="CategoryChartType.StepLine"
DataSource="CountryRenewableElectricity"
IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
IsCategoryHighlightingEnabled="true"
IsSeriesHighlightingEnabled="true"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
XAxisInterval="1"
YAxisTitle="TWh"
CrosshairsSnapToData="true">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbCategoryChart chart;
private CountryRenewableElectricity _countryRenewableElectricity = null;
public CountryRenewableElectricity CountryRenewableElectricity
{
get
{
if (_countryRenewableElectricity == null)
{
_countryRenewableElectricity = new CountryRenewableElectricity();
}
return _countryRenewableElectricity;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Treemap
The Ignite UI for Blazor Treemap displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node's rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data. Learn more about our treemaps.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbTreemapModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class CountyHierarchicalDataItem
{
public string Code { get; set; }
public string Parent { get; set; }
public string Name { get; set; }
public double Population { get; set; }
}
public class CountyHierarchicalData
: List<CountyHierarchicalDataItem>
{
public CountyHierarchicalData()
{
this.Add(new CountyHierarchicalDataItem()
{
Code = @"AFC",
Parent = null,
Name = @"Africa",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ASA",
Parent = null,
Name = @"Asia",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"EUR",
Parent = null,
Name = @"Europe",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MDE",
Parent = null,
Name = @"Middle East",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NAM",
Parent = null,
Name = @"North America",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CAM",
Parent = null,
Name = @"Central America",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SAM",
Parent = null,
Name = @"South America",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"OCE",
Parent = null,
Name = @"Oceania",
Population = double.NaN
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ANG",
Parent = @"Africa",
Name = @"Angola",
Population = 19618432
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BEN",
Parent = @"Africa",
Name = @"Benin",
Population = 9099922
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BOT",
Parent = @"Africa",
Name = @"Botswana",
Population = 2030738
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BUR",
Parent = @"Africa",
Name = @"Burkina Faso",
Population = 16967845
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BUR",
Parent = @"Africa",
Name = @"Burundi",
Population = 8575172
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CAM",
Parent = @"Africa",
Name = @"Cameroon",
Population = 20030362
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CPV",
Parent = @"Africa",
Name = @"Cape Verde",
Population = 500585
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CAR",
Parent = @"Africa",
Name = @"Central African Republic",
Population = 4486837
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CHD",
Parent = @"Africa",
Name = @"Chad",
Population = 11525496
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"COM",
Parent = @"Africa",
Name = @"Comoros",
Population = 753943
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"DRC",
Parent = @"Africa",
Name = @"Congo DRC",
Population = 67757577
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CRP",
Parent = @"Africa",
Name = @"Congo Republic",
Population = 4139748
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CIR",
Parent = @"Africa",
Name = @"Cote Ivoire",
Population = 20152894
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"DBT",
Parent = @"Africa",
Name = @"Djibouti",
Population = 905564
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ETG",
Parent = @"Africa",
Name = @"Equatorial Guinea",
Population = 720213
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ERT",
Parent = @"Africa",
Name = @"Eritrea",
Population = 5415280
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ETH",
Parent = @"Africa",
Name = @"Ethiopia",
Population = 84734262
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GBN",
Parent = @"Africa",
Name = @"Gabon",
Population = 1534262
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GMB",
Parent = @"Africa",
Name = @"Gambia",
Population = 1776103
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GHN",
Parent = @"Africa",
Name = @"Ghana",
Population = 24965816
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GUN",
Parent = @"Africa",
Name = @"Guinea",
Population = 10221808
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GNB",
Parent = @"Africa",
Name = @"Guinea-Bissau",
Population = 1547061
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"KEN",
Parent = @"Africa",
Name = @"Kenya",
Population = 41609728
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LES",
Parent = @"Africa",
Name = @"Lesotho",
Population = 2193843
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LBR",
Parent = @"Africa",
Name = @"Liberia",
Population = 4128572
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MDG",
Parent = @"Africa",
Name = @"Madagascar",
Population = 21315135
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MLW",
Parent = @"Africa",
Name = @"Malawi",
Population = 15380888
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MAL",
Parent = @"Africa",
Name = @"Mali",
Population = 15839538
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MRT",
Parent = @"Africa",
Name = @"Mauritania",
Population = 3541540
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MUS",
Parent = @"Africa",
Name = @"Mauritius",
Population = 1286051
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MOZ",
Parent = @"Africa",
Name = @"Mozambique",
Population = 23929708
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NMB",
Parent = @"Africa",
Name = @"Namibia",
Population = 2324004
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NER",
Parent = @"Africa",
Name = @"Niger",
Population = 16068994
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NGA",
Parent = @"Africa",
Name = @"Nigeria",
Population = 162470737
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"RWD",
Parent = @"Africa",
Name = @"Rwanda",
Population = 10942950
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"STM",
Parent = @"Africa",
Name = @"Sao Tome",
Population = 168526
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SEN",
Parent = @"Africa",
Name = @"Senegal",
Population = 12767556
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SYC",
Parent = @"Africa",
Name = @"Seychelles",
Population = 86000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SRL",
Parent = @"Africa",
Name = @"Sierra Leone",
Population = 5997486
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ZAF",
Parent = @"Africa",
Name = @"South Africa",
Population = 50586757
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SSD",
Parent = @"Africa",
Name = @"South Sudan",
Population = 10314021
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SDN",
Parent = @"Africa",
Name = @"Sudan",
Population = 34318385
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SWZ",
Parent = @"Africa",
Name = @"Swaziland",
Population = 1067773
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TNZ",
Parent = @"Africa",
Name = @"Tanzania",
Population = 46218486
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TOG",
Parent = @"Africa",
Name = @"Togo",
Population = 6154813
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"UGN",
Parent = @"Africa",
Name = @"Uganda",
Population = 34509205
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ZMB",
Parent = @"Africa",
Name = @"Zambia",
Population = 13474959
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ZWE",
Parent = @"Africa",
Name = @"Zimbabwe",
Population = 12754378
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"AFG",
Parent = @"Asia",
Name = @"Afghanistan",
Population = 35320445
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BAN",
Parent = @"Asia",
Name = @"Bangladesh",
Population = 150493658
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BHT",
Parent = @"Asia",
Name = @"Bhutan",
Population = 738267
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BRN",
Parent = @"Asia",
Name = @"Brunei",
Population = 405938
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CAM",
Parent = @"Asia",
Name = @"Cambodia",
Population = 14305183
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CHI",
Parent = @"Asia",
Name = @"China",
Population = 1344130000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"HNK",
Parent = @"Asia",
Name = @"Hong Kong",
Population = 7071600
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"IND",
Parent = @"Asia",
Name = @"India",
Population = 1241491960
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"IDN",
Parent = @"Asia",
Name = @"Indonesia",
Population = 242325638
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"JPN",
Parent = @"Asia",
Name = @"Japan",
Population = 127817277
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"KZH",
Parent = @"Asia",
Name = @"Kazakhstan",
Population = 16558676
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NKO",
Parent = @"Asia",
Name = @"North Korea",
Population = 24451285
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SKO",
Parent = @"Asia",
Name = @"South Korea",
Population = 49779000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"KGZ",
Parent = @"Asia",
Name = @"Kyrgyzstan",
Population = 5514600
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LAO",
Parent = @"Asia",
Name = @"Lao PDR",
Population = 6288037
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MAC",
Parent = @"Asia",
Name = @"Macao",
Population = 555731
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MYS",
Parent = @"Asia",
Name = @"Malaysia",
Population = 28859154
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MDV",
Parent = @"Asia",
Name = @"Maldives",
Population = 320081
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MNG",
Parent = @"Asia",
Name = @"Mongolia",
Population = 2800114
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MYM",
Parent = @"Asia",
Name = @"Myanmar",
Population = 48336763
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NPL",
Parent = @"Asia",
Name = @"Nepal",
Population = 30485798
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PHP",
Parent = @"Asia",
Name = @"Philippines",
Population = 94852030
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SNG",
Parent = @"Asia",
Name = @"Singapore",
Population = 5183700
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SRL",
Parent = @"Asia",
Name = @"Sri Lanka",
Population = 20869000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TKS",
Parent = @"Asia",
Name = @"Tajikistan",
Population = 6976958
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"THL",
Parent = @"Asia",
Name = @"Thailand",
Population = 69518555
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TRK",
Parent = @"Asia",
Name = @"Turkmenistan",
Population = 5105301
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"UZB",
Parent = @"Asia",
Name = @"Uzbekistan",
Population = 29341200
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"VTN",
Parent = @"Asia",
Name = @"Vietnam",
Population = 87840000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ANT",
Parent = @"Central America",
Name = @"Antigua",
Population = 89612
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ARB",
Parent = @"Central America",
Name = @"Aruba",
Population = 108141
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BHM",
Parent = @"Central America",
Name = @"Bahamas",
Population = 347176
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BRB",
Parent = @"Central America",
Name = @"Barbados",
Population = 273925
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BLZ",
Parent = @"Central America",
Name = @"Belize",
Population = 356600
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BRM",
Parent = @"Central America",
Name = @"Bermuda",
Population = 64700
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CYI",
Parent = @"Central America",
Name = @"Cayman Islands",
Population = 56729
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CSR",
Parent = @"Central America",
Name = @"Costa Rica",
Population = 4726575
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CUB",
Parent = @"Central America",
Name = @"Cuba",
Population = 11253665
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CUR",
Parent = @"Central America",
Name = @"Curacao",
Population = 145619
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"DMA",
Parent = @"Central America",
Name = @"Dominica",
Population = 67675
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"DOM",
Parent = @"Central America",
Name = @"Dominican Republic",
Population = 10056181
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SLV",
Parent = @"Central America",
Name = @"El Salvador",
Population = 6227491
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"FIS",
Parent = @"Central America",
Name = @"Faeroe Islands",
Population = 48863
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GND",
Parent = @"Central America",
Name = @"Grenada",
Population = 104890
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GUA",
Parent = @"Central America",
Name = @"Guam",
Population = 182111
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GTM",
Parent = @"Central America",
Name = @"Guatemala",
Population = 14757316
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"HAT",
Parent = @"Central America",
Name = @"Haiti",
Population = 10123787
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"HON",
Parent = @"Central America",
Name = @"Honduras",
Population = 7754687
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"JAM",
Parent = @"Central America",
Name = @"Jamaica",
Population = 2706500
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NCR",
Parent = @"Central America",
Name = @"Nicaragua",
Population = 5869859
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NMI",
Parent = @"Central America",
Name = @"Northern Mariana Islands",
Population = 61174
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PAN",
Parent = @"Central America",
Name = @"Panama",
Population = 3571185
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PRT",
Parent = @"Central America",
Name = @"Puerto Rico",
Population = 3706690
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"STK",
Parent = @"Central America",
Name = @"St. Kitts",
Population = 53051
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"STL",
Parent = @"Central America",
Name = @"St. Lucia",
Population = 176000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"STV",
Parent = @"Central America",
Name = @"St. Vincent",
Population = 109365
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TAB",
Parent = @"Central America",
Name = @"Trinidad and Tobago",
Population = 1346350
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"RCI",
Parent = @"Central America",
Name = @"Turks and Caicos Islands",
Population = 39184
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ISV",
Parent = @"Central America",
Name = @"US Virgin Islands",
Population = 109666
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ALB",
Parent = @"Europe",
Name = @"Albania",
Population = 3215988
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"AND",
Parent = @"Europe",
Name = @"Andorra",
Population = 86165
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ARM",
Parent = @"Europe",
Name = @"Armenia",
Population = 3100236
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"AUT",
Parent = @"Europe",
Name = @"Austria",
Population = 8423635
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BER",
Parent = @"Europe",
Name = @"Belarus",
Population = 9473000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BEL",
Parent = @"Europe",
Name = @"Belgium",
Population = 11020952
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BIH",
Parent = @"Europe",
Name = @"Bosnia",
Population = 3752228
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BUL",
Parent = @"Europe",
Name = @"Bulgaria",
Population = 7348328
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CHI",
Parent = @"Europe",
Name = @"Channel Islands",
Population = 153876
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CRO",
Parent = @"Europe",
Name = @"Croatia",
Population = 4403000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CYP",
Parent = @"Europe",
Name = @"Cyprus",
Population = 1116564
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CZE",
Parent = @"Europe",
Name = @"Czechia",
Population = 10496088
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"DEN",
Parent = @"Europe",
Name = @"Denmark",
Population = 5570572
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"EST",
Parent = @"Europe",
Name = @"Estonia",
Population = 1339928
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"FIN",
Parent = @"Europe",
Name = @"Finland",
Population = 5388272
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"FRA",
Parent = @"Europe",
Name = @"France",
Population = 65433714
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GEO",
Parent = @"Europe",
Name = @"Georgia",
Population = 4486000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"DEU",
Parent = @"Europe",
Name = @"Germany",
Population = 81797673
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GRC",
Parent = @"Europe",
Name = @"Greece",
Population = 11300410
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"HUN",
Parent = @"Europe",
Name = @"Hungary",
Population = 9971727
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ICE",
Parent = @"Europe",
Name = @"Iceland",
Population = 319014
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"IRE",
Parent = @"Europe",
Name = @"Ireland",
Population = 4576317
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"IOM",
Parent = @"Europe",
Name = @"Isle of Man",
Population = 83327
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ITA",
Parent = @"Europe",
Name = @"Italy",
Population = 60723603
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"KOS",
Parent = @"Europe",
Name = @"Kosovo",
Population = 1802765
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LAT",
Parent = @"Europe",
Name = @"Latvia",
Population = 2058184
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LVA",
Parent = @"Europe",
Name = @"Liechtenstein",
Population = 36304
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LTU",
Parent = @"Europe",
Name = @"Lithuania",
Population = 3030173
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LUX",
Parent = @"Europe",
Name = @"Luxembourg",
Population = 518252
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MKD",
Parent = @"Europe",
Name = @"North Macedonia",
Population = 2063893
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MLT",
Parent = @"Europe",
Name = @"Malta",
Population = 415654
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MDA",
Parent = @"Europe",
Name = @"Moldova",
Population = 3559000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MON",
Parent = @"Europe",
Name = @"Monaco",
Population = 35427
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MNE",
Parent = @"Europe",
Name = @"Montenegro",
Population = 632261
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MLD",
Parent = @"Europe",
Name = @"Netherlands",
Population = 16693074
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NOR",
Parent = @"Europe",
Name = @"Norway",
Population = 4953088
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"POL",
Parent = @"Europe",
Name = @"Poland",
Population = 38534157
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"POR",
Parent = @"Europe",
Name = @"Portugal",
Population = 10556999
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ROM",
Parent = @"Europe",
Name = @"Romania",
Population = 21384832
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"RUS",
Parent = @"Europe",
Name = @"Russia",
Population = 142960000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SMR",
Parent = @"Europe",
Name = @"San Marino",
Population = 31735
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SBR",
Parent = @"Europe",
Name = @"Serbia",
Population = 7258745
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"STM",
Parent = @"Europe",
Name = @"Sint Maarten",
Population = 36609
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SVK",
Parent = @"Europe",
Name = @"Slovakia",
Population = 5398384
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SLO",
Parent = @"Europe",
Name = @"Slovenia",
Population = 2052843
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ESP",
Parent = @"Europe",
Name = @"Spain",
Population = 46174601
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"STM",
Parent = @"Europe",
Name = @"St. Martin",
Population = 30615
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SWE",
Parent = @"Europe",
Name = @"Sweden",
Population = 9449213
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CHE",
Parent = @"Europe",
Name = @"Switzerland",
Population = 7912398
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"UKR",
Parent = @"Europe",
Name = @"Ukraine",
Population = 45706100
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GBR",
Parent = @"Europe",
Name = @"United Kingdom",
Population = 62744081
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"DZA",
Parent = @"Middle East",
Name = @"Algeria",
Population = 35980193
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"AZE",
Parent = @"Middle East",
Name = @"Azerbaijan",
Population = 9173082
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BHR",
Parent = @"Middle East",
Name = @"Bahrain",
Population = 1323535
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"EGY",
Parent = @"Middle East",
Name = @"Egypt",
Population = 82536770
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"IRN",
Parent = @"Middle East",
Name = @"Iran",
Population = 74798599
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"IRQ",
Parent = @"Middle East",
Name = @"Iraq",
Population = 32961959
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ISR",
Parent = @"Middle East",
Name = @"Israel",
Population = 7765900
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"JOR",
Parent = @"Middle East",
Name = @"Jordan",
Population = 6181000
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"KWT",
Parent = @"Middle East",
Name = @"Kuwait",
Population = 2818042
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LBN",
Parent = @"Middle East",
Name = @"Lebanon",
Population = 4259405
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"LBY",
Parent = @"Middle East",
Name = @"Libya",
Population = 6422772
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MAR",
Parent = @"Middle East",
Name = @"Morocco",
Population = 32272974
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"OMN",
Parent = @"Middle East",
Name = @"Oman",
Population = 2846145
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PKS",
Parent = @"Middle East",
Name = @"Pakistan",
Population = 176745364
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"QTR",
Parent = @"Middle East",
Name = @"Qatar",
Population = 1870041
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SAR",
Parent = @"Middle East",
Name = @"Saudi Arabia",
Population = 28082541
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SOM",
Parent = @"Middle East",
Name = @"Somalia",
Population = 9556873
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SYR",
Parent = @"Middle East",
Name = @"Syria",
Population = 20820311
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TUN",
Parent = @"Middle East",
Name = @"Tunisia",
Population = 10673800
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TUR",
Parent = @"Middle East",
Name = @"Turkey",
Population = 73639596
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"UAE",
Parent = @"Middle East",
Name = @"United Arab Emirates",
Population = 7890924
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"WTB",
Parent = @"Middle East",
Name = @"West Bank",
Population = 3927051
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"YEM",
Parent = @"Middle East",
Name = @"Yemen",
Population = 24799880
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CAN",
Parent = @"North America",
Name = @"Canada",
Population = 34483975
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GRL",
Parent = @"North America",
Name = @"Greenland",
Population = 56840
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MEX",
Parent = @"North America",
Name = @"Mexico",
Population = 114793341
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"USA",
Parent = @"North America",
Name = @"United States",
Population = 311591917
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"AMS",
Parent = @"Oceania",
Name = @"American Samoa",
Population = 69543
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"AUS",
Parent = @"Oceania",
Name = @"Australia",
Population = 22323900
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"FIJ",
Parent = @"Oceania",
Name = @"Fiji",
Population = 868406
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"FRP",
Parent = @"Oceania",
Name = @"French Polynesia",
Population = 273777
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"KIR",
Parent = @"Oceania",
Name = @"Kiribati",
Population = 101093
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MIS",
Parent = @"Oceania",
Name = @"Marshall Islands",
Population = 54816
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"MCR",
Parent = @"Oceania",
Name = @"Micronesia",
Population = 111542
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NCD",
Parent = @"Oceania",
Name = @"New Caledonia",
Population = 254024
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"NZL",
Parent = @"Oceania",
Name = @"New Zealand",
Population = 4405200
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PAL",
Parent = @"Oceania",
Name = @"Palau",
Population = 20609
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PNG",
Parent = @"Oceania",
Name = @"Papua New Guinea",
Population = 7013829
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SAM",
Parent = @"Oceania",
Name = @"Samoa",
Population = 183874
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SIS",
Parent = @"Oceania",
Name = @"Solomon Islands",
Population = 552267
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TML",
Parent = @"Oceania",
Name = @"Timor-Leste",
Population = 1175880
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TON",
Parent = @"Oceania",
Name = @"Tonga",
Population = 104509
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"TUV",
Parent = @"Oceania",
Name = @"Tuvalu",
Population = 9847
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"VNT",
Parent = @"Oceania",
Name = @"Vanuatu",
Population = 245619
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ARG",
Parent = @"South America",
Name = @"Argentina",
Population = 40764561
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BOL",
Parent = @"South America",
Name = @"Bolivia",
Population = 10088108
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"BRA",
Parent = @"South America",
Name = @"Brazil",
Population = 196655014
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"CHI",
Parent = @"South America",
Name = @"Chile",
Population = 17269525
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"COL",
Parent = @"South America",
Name = @"Colombia",
Population = 46927125
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"ECU",
Parent = @"South America",
Name = @"Ecuador",
Population = 14666055
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"GUY",
Parent = @"South America",
Name = @"Guyana",
Population = 756040
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PAR",
Parent = @"South America",
Name = @"Paraguay",
Population = 6568290
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"PER",
Parent = @"South America",
Name = @"Peru",
Population = 29399817
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"SUR",
Parent = @"South America",
Name = @"Suriname",
Population = 529419
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"URG",
Parent = @"South America",
Name = @"Uruguay",
Population = 3368595
});
this.Add(new CountyHierarchicalDataItem()
{
Code = @"VEN",
Parent = @"South America",
Name = @"Venezuela",
Population = 29278000
});
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="legend-title">
Comparing Population of Countries
</div>
<div class="container vertical fill">
<IgbTreemap
Name="treemap"
@ref="treemap"
DataSource="CountyHierarchicalData"
ParentIdMemberPath="Parent"
IdMemberPath="Name"
LabelMemberPath="Name"
ValueMemberPath="Population"
FillScaleMode="TreemapFillScaleMode.Value"
FillScaleMinimumValue="0"
FillScaleMaximumValue="1500000000"
FillBrushes="#4e62cf #8a58d6"
IsFillScaleLogarithmic="true"
RootTitle="Countries"
HeaderDisplayMode="TreemapHeaderDisplayMode.Overlay"
ParentNodeBottomPadding="0"
ParentNodeLeftPadding="0"
ParentNodeRightPadding="0"
ParentNodeTopPadding="0"
Outline="black"
StrokeThickness="1">
</IgbTreemap>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treemap = this.treemap;
}
private IgbTreemap treemap;
private CountyHierarchicalData _countyHierarchicalData = null;
public CountyHierarchicalData CountyHierarchicalData
{
get
{
if (_countyHierarchicalData == null)
{
_countyHierarchicalData = new CountyHierarchicalData();
}
return _countyHierarchicalData;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Charts Key Features
Show how your data changes over time with our built-in Time Axis. We’ll dynamically change time scales and label formats, as you interact with your chart. We’ve included a complete Financial Chart with all of the features you’ve come to expect in your financial charts, like Yahoo Finance or Google Finance.
Dynamic Charts
Visualize your data by creating new Composite Chart and overlapping multiple series in single chart. In the Chart, you can display and overlap multiple chart columns to create stacked columns.
Custom Tooltips
Visualize your data by creating new composite views and overlapping multiple series in single chart. In the Chart, you can create Custom Tooltips with images, data binding, and even combine tooltips of multiple series into single tooltip.
High-Performance, Real-Time Charting
Display thousands of data points with milliseconds-level updates in real time with live, streaming data. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. For a demo, refer to the Chart with High-Frequency topic.
High-Volume Data Handling
Optimize Chart Performance to render millions of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. For a demo, refer to the Chart with High-Volume topic.
Modular Design
The Blazor chart is designed for modularity. Only features that are needed are part of your deployment, so you get the smallest possible footprint in your rendered pages.
Smart Data Binding
Let us choose the chart type. Our smart Data Adapter automatically chooses the best chart type for the data. All you do is set the data source and we do the rest.
Trendlines
Blazor Charts support all Trendlines you’ll ever need, including linear (x), quadratic (x2), cubic (x3), quartic (x4), quintic (x5), logarithmic (log x), exponential (ex), and power law (axk + o(xk)) trend lines.
Interactive Panning and Zooming
Use single or multi-touch, keyboard, zoom bar, mouse wheel, drag-select for any rectangular region with the mouse to zoom in for close-up look at data points, scroll data history, or pan data regions.
Markers, Tooltips, and Templates
Use one of 10 Marker Types or create your own Marker Template to highlight data or use simple Tooltips or multi-axis and multi-series chart with Custom Tooltips to give more context and meaning to your data.
But Wait, There’s More!
If you are considering any other Blazor Charts on the market, here are a few things to think about:
- We include over 65 Blazor chart types and combination charts, with the simplest configuration on the market with our smart data adapter.
- Our charts are optimized on all platforms including Angular, Blazor, jQuery / JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI, and Xamarin. They support the same API and same features on every platform.
- Our stock chart and financial charting gives you everything you need for a Yahoo Finance or Google Finance-like experience – all with a single line of code.
- We test against everyone elses performance. Everyone says they are fast and can handle lots of data, but we can prove it. See for yourself how we handle high-volume data and real-time data streaming.
- We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are!
- We have many more UI controls in Blazor besides the Charts. We offer a complete Blazor solution to build your applications!
API References
All types of chart types mentioned in this topic are implemented in these API components: