Blazor Axis Gridlines

All Ignite UI for Blazor charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis.

the following examples can be applied to IgbCategoryChart as well as IgbFinancialChart controls.

Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines.

Axis tickmarks are displayed along all horizontal and vertical axes at each label at all major line positions of the Blazor chart.

A full set of ready-to-use features, covering everything from paging, sorting, filtering, editing, grouping to virtualization on rows and columns, and beyond. No limits for .NET developers.

Try Now For Free

Blazor Axis Gridlines Example

This example shows how configure the axis gridline to display major and minor gridlines at specified intervals:

EXAMPLE

MODULES

DATA

RAZOR

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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbLegendModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

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

@using IgniteUI.Blazor.Controls

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

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisStroke"
            Name="XAxisStroke"
            @ref="xAxisStroke"
            Label="X Axis Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("gray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisMajorStroke"
            Name="XAxisMajorStroke"
            @ref="xAxisMajorStroke"
            Label="X Axis Major Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("darkslategray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisStroke"
            Name="YAxisStroke"
            @ref="yAxisStroke"
            Label="Y Axis Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("gray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisMajorStroke"
            Name="YAxisMajorStroke"
            @ref="yAxisMajorStroke"
            Label="Y Axis Major Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("darkslategray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisMinorStroke"
            Name="YAxisMinorStroke"
            @ref="yAxisMinorStroke"
            Label="Y Axis Minor Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("gray")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <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"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Line"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        XAxisStroke="#919191"
        XAxisStrokeThickness="2"
        XAxisInterval="1"
        XAxisMajorStroke="#474747"
        XAxisMajorStrokeThickness="0.5"
        YAxisStroke="gray"
        YAxisStrokeThickness="2"
        YAxisInterval="20"
        YAxisMajorStroke="darkslategray"
        YAxisMajorStrokeThickness="1"
        YAxisMinorInterval="5"
        YAxisMinorStroke="gray"
        YAxisMinorStrokeThickness="0.5"
        Thickness="2">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var propertyEditorPanel1 = this.propertyEditorPanel1;
        var xAxisStroke = this.xAxisStroke;
        var xAxisMajorStroke = this.xAxisMajorStroke;
        var yAxisStroke = this.yAxisStroke;
        var yAxisMajorStroke = this.yAxisMajorStroke;
        var yAxisMinorStroke = this.yAxisMinorStroke;
        var chart = this.chart;

        this.BindElements = () => {
            propertyEditorPanel1.Target = this.chart;
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription xAxisStroke;
    private IgbPropertyEditorPropertyDescription xAxisMajorStroke;
    private IgbPropertyEditorPropertyDescription yAxisStroke;
    private IgbPropertyEditorPropertyDescription yAxisMajorStroke;
    private IgbPropertyEditorPropertyDescription yAxisMinorStroke;
    private IgbCategoryChart chart;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razorCOPY CODE

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

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Blazor Axis Gridlines Properties

Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis.

In order to display minor gridlines that correspond to minor interval, you need to set XAxisMinorStroke and XAxisMinorStrokeThickness properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them.

You can customize how the gridlines are displayed in your Blazor chart by setting the following properties:

Axis Visuals	Type	Property Names	Description
Major Stroke Color	string	XAxisMajorStroke YAxisMajorStroke	These properties set the color of axis major gridlines.
Minor Stroke Color	string	XAxisMinorStroke YAxisMinorStroke	These properties set the color of axis minor gridlines.
Major Stroke Thickness	number	XAxisMajorStrokeThickness YAxisMajorStrokeThickness	These properties set the thickness in pixels of the axis major gridlines.
Minor Stroke Thickness	number	XAxisMinorStrokeThickness YAxisMinorStrokeThickness	These properties set the thickness in pixels of the axis minor gridlines.
Major Interval	number	XAxisInterval YAxisInterval	These properties set interval between axis major gridlines and labels.
Minor Interval	number	XAxisMinorInterval YAxisMinorInterval	These properties set interval between axis minor gridlines, if used.
Axis Line Stroke Color	string	XAxisStroke YAxisStroke	These properties set the color of an axis line.
Axis Stroke Thickness	number	XAxisStrokeThickness YAxisStrokeThickness	These properties set the thickness in pixels of an axis line.

Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties.

On category axes, the intervals are represented as an index between first item and last category item. Generally, this value should equal to 10-20% of total numbers of category items for the major Interval so that all axis labels fit on axis so that they are not clipped by other axis labels. For minor intervals, this is represented as a fraction of the major interval properties. This value generally should equal between 0.25 and 0.5.

On numeric axes, the interval values are represented as a double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value.

On date time axes, this value is represented as time span between axis minimum value and axis maximum value.

The following example demonstrates how to customize the gridlines by setting the properties above:

EXAMPLE

MODULES

DATA

RAZOR

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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbLegendModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

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

@using IgniteUI.Blazor.Controls

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

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisStroke"
            Name="XAxisStroke"
            @ref="xAxisStroke"
            Label="X Axis Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("gray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisMajorStroke"
            Name="XAxisMajorStroke"
            @ref="xAxisMajorStroke"
            Label="X Axis Major Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("darkslategray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisStroke"
            Name="YAxisStroke"
            @ref="yAxisStroke"
            Label="Y Axis Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("gray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisMajorStroke"
            Name="YAxisMajorStroke"
            @ref="yAxisMajorStroke"
            Label="Y Axis Major Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("darkslategray")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisMinorStroke"
            Name="YAxisMinorStroke"
            @ref="yAxisMinorStroke"
            Label="Y Axis Minor Stroke"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            DropDownValues="@(new string[] { "gray", "darkslategray", "salmon", "cornflowerblue", "darkgreen" })"
            PrimitiveValue="@("gray")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <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"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Line"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        XAxisStroke="#919191"
        XAxisStrokeThickness="2"
        XAxisInterval="1"
        XAxisMajorStroke="#474747"
        XAxisMajorStrokeThickness="0.5"
        YAxisStroke="gray"
        YAxisStrokeThickness="2"
        YAxisInterval="20"
        YAxisMajorStroke="darkslategray"
        YAxisMajorStrokeThickness="1"
        YAxisMinorInterval="5"
        YAxisMinorStroke="gray"
        YAxisMinorStrokeThickness="0.5"
        Thickness="2">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var propertyEditorPanel1 = this.propertyEditorPanel1;
        var xAxisStroke = this.xAxisStroke;
        var xAxisMajorStroke = this.xAxisMajorStroke;
        var yAxisStroke = this.yAxisStroke;
        var yAxisMajorStroke = this.yAxisMajorStroke;
        var yAxisMinorStroke = this.yAxisMinorStroke;
        var chart = this.chart;

        this.BindElements = () => {
            propertyEditorPanel1.Target = this.chart;
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription xAxisStroke;
    private IgbPropertyEditorPropertyDescription xAxisMajorStroke;
    private IgbPropertyEditorPropertyDescription yAxisStroke;
    private IgbPropertyEditorPropertyDescription yAxisMajorStroke;
    private IgbPropertyEditorPropertyDescription yAxisMinorStroke;
    private IgbCategoryChart chart;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razorCOPY CODE

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

The axes of the IgbDataChart also have the ability to place a dash array on the major and minor gridlines by utilizing the MajorStrokeDashArray and MinorStrokeDashArray properties, respectively. The actual axis line can be dashed as well by setting the StrokeDashArray property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines.

The following example demonstrates a IgbDataChart with the above dash array properties set:

EXAMPLE

MODULES

DATA

RAZOR

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(IgbLegendModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

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

@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">
        <IgbDataChart
        Name="chart"
        @ref="chart"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year"
            Interval="1"
            MajorStroke="#474747"
            MajorStrokeThickness="0.5"
            Stroke="#919191"
            StrokeThickness="2"
            StrokeDashArray="@(new double[] { 5, 5 })"
            MajorStrokeDashArray="@(new double[] { 5, 5 })"
            TickLength="0">
            </IgbCategoryXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Stroke="gray"
            StrokeThickness="2"
            Interval="20"
            MajorStroke="darkslategray"
            MajorStrokeThickness="1"
            MinorInterval="5"
            MinorStroke="gray"
            MinorStrokeThickness="0.5"
            StrokeDashArray="@(new double[] { 5, 5 })"
            MajorStrokeDashArray="@(new double[] { 5, 5 })"
            MinorStrokeDashArray="@(new double[] { 2.5, 2.5 })"
            TickLength="0">
            </IgbNumericYAxis>

            <IgbLineSeries
            Name="LineSeries1"
            @ref="lineSeries1"
            Title="Europe"
            XAxisName="xAxis"
            YAxisName="yAxis"
            MarkerType="MarkerType.Circle"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="Europe"
            ShowDefaultTooltip="true">
            </IgbLineSeries>

            <IgbLineSeries
            Name="LineSeries2"
            @ref="lineSeries2"
            Title="China"
            XAxisName="xAxis"
            YAxisName="yAxis"
            MarkerType="MarkerType.Circle"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="China"
            ShowDefaultTooltip="true">
            </IgbLineSeries>

            <IgbLineSeries
            Name="LineSeries3"
            @ref="lineSeries3"
            Title="America"
            XAxisName="xAxis"
            YAxisName="yAxis"
            MarkerType="MarkerType.Circle"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America"
            ShowDefaultTooltip="true">
            </IgbLineSeries>

        </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 lineSeries1 = this.lineSeries1;
        var lineSeries2 = this.lineSeries2;
        var lineSeries3 = this.lineSeries3;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;
    private IgbLineSeries lineSeries2;
    private IgbLineSeries lineSeries3;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razorCOPY CODE

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

Blazor Axis Tickmarks Example

Axis tick marks are enabled by setting the XAxisTickLength and YAxisTickLength properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.

Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the YAxisTickLength property is set to 5, axis labels will be shifted left by that amount.

The following example demonstrates how to customize the tickmarks by setting the properties above:

EXAMPLE

MODULES

DATA

RAZOR

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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbLegendModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

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

@using IgniteUI.Blazor.Controls

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

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisTickLength"
            Name="XAxisTickLength"
            @ref="xAxisTickLength"
            Label="X Axis Tick Length"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.Slider"
            Min="0"
            Max="20"
            PrimitiveValue="10">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <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"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Line"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        XAxisTickLength="10"
        XAxisTickStrokeThickness="1"
        XAxisTickStroke="gray"
        YAxisTickLength="0"
        YAxisTickStrokeThickness="0"
        YAxisTickStroke="#00000000">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var propertyEditorPanel1 = this.propertyEditorPanel1;
        var xAxisTickLength = this.xAxisTickLength;
        var chart = this.chart;

        this.BindElements = () => {
            propertyEditorPanel1.Target = this.chart;
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription xAxisTickLength;
    private IgbCategoryChart chart;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razorCOPY CODE

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

Blazor Axis Tickmarks Properties

You can customize how the axis tickmarks are displayed in our Blazor chats by setting the following properties:

Axis Visuals	Type	Property Names	Description
Tick Stroke Color	string	XAxisTickStroke YAxisTickStroke	These properties set the color of the tickmarks.
Tick Stroke Thickness	number	XAxisTickStrokeThickness YAxisTickStrokeThickness	These properties set the thickness of the axis tick marks.
Tick Stroke Length	number	XAxisTickLength YAxisTickLength	These properties set the length of the axis tick marks.

Additional Resources

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

• Axis Layout
• Axis Options

API References

The following is a list of API members mentioned in the above sections:

IgbDataChart	IgbCategoryChart or IgbFinancialChart
Axes ➔ IgbNumericXAxis ➔ Interval	XAxisInterval (Major Interval)
Axes ➔ IgbNumericYAxis ➔ Interval	YAxisInterval (Major Interval)
Axes ➔ IgbNumericXAxis ➔ MinorInterval	XAxisMinorInterval
Axes ➔ IgbNumericYAxis ➔ MinorInterval	YAxisMinorInterval
Axes ➔ IgbNumericXAxis ➔ MajorStroke	XAxisMajorStroke
Axes ➔ IgbNumericYAxis ➔ MajorStroke	YAxisMajorStroke
Axes ➔ IgbNumericXAxis ➔ MajorStrokeThickness	XAxisMajorStrokeThickness
Axes ➔ IgbNumericYAxis ➔ MajorStrokeThickness	YAxisMajorStrokeThickness
Axes ➔ IgbNumericXAxis ➔ MinorStrokeThickness	XAxisMinorStrokeThickness
Axes ➔ IgbNumericYAxis ➔ MinorStrokeThickness	YAxisMinorStrokeThickness
Axes ➔ IgbNumericXAxis ➔ StrokeThickness	XAxisStrokeThickness
Axes ➔ IgbNumericYAxis ➔ StrokeThickness	YAxisStrokeThickness
Axes ➔ IgbNumericXAxis ➔ Stroke	XAxisStroke (Axis Line Color)
Axes ➔ IgbNumericYAxis ➔ Stroke	YAxisStroke (Axis Line Color)
Axes ➔ IgbNumericXAxis ➔ TickLength	XAxisTickLength
Axes ➔ IgbNumericYAxis ➔ TickLength	YAxisTickLength
Axes ➔ IgbNumericXAxis ➔ TickStroke	XAxisTickStroke
Axes ➔ IgbNumericYAxis ➔ TickStroke	YAxisTickStroke
Axes ➔ IgbNumericXAxis ➔ Strip	XAxisStrip (Space between Major Gridlines)
Axes ➔ IgbNumericYAxis ➔ Strip	YAxisStrip (Space between Major Gridlines)