Blazor Shape Charts

The Ignite UI for Blazor Shape Charts are a group of charts 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.

Blazor Scatter Polygon Chart

The Blazor Scatter Polygon Chart renders an array or array of arrays of polygons in the Cartesian (x, y) coordinate system using IgbScatterPolygonSeries in the IgbDataChart control. This chart can be used to filled shapes of plot diagrams, blueprints, or even the floor plan of buildings.

You can create this type of chart in the IgbDataChart control by binding your data to a IgbScatterPolygonSeries, as shown in the example below:

EXAMPLE

MODULES

RAZOR

JS

CSS

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();
        }
    }
}csCOPY CODE

@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; }
    }
}razorCOPY CODE

function 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;
}jsCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Blazor Scatter Polyline Chart

The Blazor Scatter Polyline Chart renders an array or array of arrays of polylines in the Cartesian (x, y) coordinate system using IgbScatterPolylineSeries in the IgbDataChart control. This chart can be used to outlines of plot diagrams, blueprints, or even the floor plan of buildings. Also, it can visualizes complex relationships between a large amount of elements.

You can create this type of chart in the IgbDataChart control by binding your data to a IgbScatterPolylineSeries, as shown in the example below:

EXAMPLE

MODULES

RAZOR

JS

CSS

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(IgbScatterPolylineSeriesModule)
);
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls
@using System.Net.Http.Json

<div class="container vertical">
    <div class="container vertical">

        <div class="options vertical">
            <span class="legend-title">Airplane Seating Chart (Polylines)</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="onPolylineSeriesMouseEnter"
                       IsHorizontalZoomEnabled="true"
                       IsVerticalZoomEnabled="true">

                <IgbNumericXAxis Name="xAxis" MinimumValue="-1000" MaximumValue="1000" Interval="200"></IgbNumericXAxis>
                <IgbNumericYAxis Name="yAxis" MinimumValue="-600" MaximumValue="600" Interval="200"></IgbNumericYAxis>

                <IgbScatterPolylineSeries XAxisName="xAxis"
                                      YAxisName="yAxis"
                                      DataSource="AirplaneShape"
                                      ShapeMemberPath="Points"
                                      ShowDefaultTooltip="false"
                                      Thickness="0.5"
                                      Brush="LightGray" Outline="Black">
                </IgbScatterPolylineSeries>

                <IgbScatterPolylineSeries XAxisName="xAxis"
                                      YAxisName="yAxis"
                                      DataSource="AirplaneSeats"
                                      Title="AirplaneSeats"
                                      ShapeMemberPath="Points"
                                      StyleShapeScript="onPolylineShapeStyle">
                </IgbScatterPolylineSeries>

            </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; }
    }
}razorCOPY CODE

function onPolylineShapeStyle(o, e) {

    e.shapeOpacity = 1.0;
    e.shapeStrokeThickness = 1.0;
    e.shapeStroke = 'Black';

    var dataItem = e.item;
    if (dataItem.Class === 'First') {
        e.shapeStroke = 'DodgerBlue';
    }
    if (dataItem.Class === 'Business') {
        e.shapeStroke = 'LimeGreen';
    }
    if (dataItem.Class === 'Premium') {
        e.shapeStroke = 'Orange';
    }
    if (dataItem.Class === 'Economy') {
        e.shapeStroke = 'Red';
    }

    if (dataItem.Status === 'Sold') {
        e.shapeStroke = 'Gray';
    }
}
igRegisterScript("onPolylineShapeStyle", onPolylineShapeStyle, false);

function onPolylineSeriesMouseEnter(o, e) {
    if (e.series.title !== "AirplaneSeats") return;

    if (e.series.tooltipTemplate === null ||
        e.series.tooltipTemplate === undefined) {
        e.series.tooltipTemplate = createPolylineSeriesTooltip;
        console.log("onPolylineSeriesMouseEnter");
    }
}
igRegisterScript("onPolylineSeriesMouseEnter", onPolylineSeriesMouseEnter, false);

function createPolylineSeriesTooltip(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;
}jsCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Additional Resources

You can find more information about related chart types in these topics:

• Area Chart
• Line Chart
• Scatter Chart

API References

The following table lists API members mentioned in the above sections:

• IgbDataChart
• IgbScatterPolygonSeries
• IgbScatterPolylineSeries
• DataSource
• ShapeMemberPath
• IgbNumericXAxis
• IgbNumericYAxis
• YAxisName
• XAxisName