Blazor

Search results

Axis Labels in Blazor Chart component

28 Jul 2021 / 3 minutes to read

Smart Axis Labels

When the axis labels overlap, the LabelIntersectAction property in the axis may be used to intelligently arrange them.

When LabelIntersectAction is set to Hide,

hide.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"
        LabelIntersectAction="LabelIntersectAction.Hide" />

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>

</SfChart>

@code{
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
    {
    new ChartData { X= "South Korea", Y= 39.4 },
    new ChartData { X= "India", Y= 61.3 },
    new ChartData { X= "Pakistan", Y= 20.4 },
    new ChartData { X= "Germany", Y= 65.1 },
    new ChartData { X= "Australia", Y= 15.8 },
    new ChartData { X= "Italy", Y= 29.2 },
    new ChartData { X= "United Kingdom", Y= 44.6 },
    new ChartData { X= "Saudi Arabia", Y= 9.7 },
    new ChartData { X= "Russia", Y= 40.8 },
    new ChartData { X= "Mexico", Y= 31 },
    new ChartData { X= "Brazil", Y= 75.9 },
    new ChartData { X= "China", Y= 51.4 }
    };
}

Hide

When LabelIntersectAction is set to Rotate45

rotate45.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"
                       LabelIntersectAction="LabelIntersectAction.Rotate45" />

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>

</SfChart>

@code{
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
    new ChartData { X= "South Korea", Y= 39.4 },
    new ChartData { X= "India", Y= 61.3 },
    new ChartData { X= "Pakistan", Y= 20.4 },
    new ChartData { X= "Germany", Y= 65.1 },
    new ChartData { X= "Australia", Y= 15.8 },
    new ChartData { X= "Italy", Y= 29.2 },
    new ChartData { X= "United Kingdom", Y= 44.6 },
    new ChartData { X= "Saudi Arabia", Y= 9.7 },
    new ChartData { X= "Russia", Y= 40.8 },
    new ChartData { X= "Mexico", Y= 31 },
    new ChartData { X= "Brazil", Y= 75.9 },
    new ChartData { X= "China", Y= 51.4 }
    };
}

Rotate45

When LabelIntersectAction is set to Rotate90

rotate90.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"
                       LabelIntersectAction="LabelIntersectAction.Rotate90" />

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>

</SfChart>

@code{
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
    new ChartData { X= "South Korea", Y= 39.4 },
    new ChartData { X= "India", Y= 61.3 },
    new ChartData { X= "Pakistan", Y= 20.4 },
    new ChartData { X= "Germany", Y= 65.1 },
    new ChartData { X= "Australia", Y= 15.8 },
    new ChartData { X= "Italy", Y= 29.2 },
    new ChartData { X= "United Kingdom", Y= 44.6 },
    new ChartData { X= "Saudi Arabia", Y= 9.7 },
    new ChartData { X= "Russia", Y= 40.8 },
    new ChartData { X= "Mexico", Y= 31 },
    new ChartData { X= "Brazil", Y= 75.9 },
    new ChartData { X= "China", Y= 51.4 }
    };
}

Rotate90

Axis Labels Positioning

The axis labels can be put Outside of the axis line by default, however the LabelPosition property may also be used to position them Inside the axis line.

position.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" 
                       LabelPosition="AxisPosition.Inside"/>   

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column"/>        
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
 {
            new ChartData { X= "South Korea", Y= 39.4 },
            new ChartData { X= "India", Y= 61.3 },
            new ChartData { X= "Pakistan", Y= 20.4 },
            new ChartData { X= "Germany", Y= 65.1 },
            new ChartData { X= "Australia", Y= 15.8 },
            new ChartData { X= "Italy", Y= 29.2 },
            new ChartData { X= "United Kingdom", Y= 44.6 },
            new ChartData { X= "Saudi Arabia", Y= 9.7 },
            new ChartData { X= "Russia", Y= 40.8 },
            new ChartData { X= "Mexico", Y= 31 },
            new ChartData { X= "Brazil", Y= 75.9 },
            new ChartData { X= "China", Y= 51.4 }
        };
}

Axis Labels Positioning

Multilevel Labels

The MultiLevelLabels property allows you to add any number of layers of labels to the axis. The following properties can be used to configure this property.

Overflow

Trim or Wrap the multilevel labels using the Overflow property.

overflows.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel Overflow="TextOverflow.Trim">
                <ChartCategories>                  
                        <ChartCategory Start="-0.5" End="3.5" Text="Half yearly 1" MaximumTextWidth=50></ChartCategory>
                        <ChartCategory Start="3.5" End="7.5" Text="Half yearly 2" MaximumTextWidth=50></ChartCategory>                   
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{

    public int start = 0, end = 30;
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
            new ChartData { X= "Russia", Y= 50 },
            new ChartData { X= "China", Y= 40 },
            new ChartData { X= "Japan", Y= 70 },
            new ChartData { X= "Australia", Y= 60 },
            new ChartData { X= "France", Y= 70 },
            new ChartData { X= "Germany", Y= 40 },
            new ChartData { X= "Italy", Y= 40 },
            new ChartData { X= "United states", Y= 30 },
        };
}

Axis Labels Positioning

Alignment

The Alignment property provides option to position the multilevel labels at Far, Center, or Near.

The Alignment property allows to place multilevel labels in a Far, Center, or Near location.

alignments.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel Alignment="Alignment.Far">
                <ChartCategories>
                        <ChartCategory Start="-0.5" End="3.5" Text="Half yearly 1" MaximumTextWidth=50></ChartCategory>
                        <ChartCategory Start="3.5" End="7.5" Text="Half yearly 2" MaximumTextWidth=50></ChartCategory>
                       
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{

    public int start = 0, end = 30;
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
            new ChartData { X= "Russia", Y= 50 },
            new ChartData { X= "China", Y= 40 },
            new ChartData { X= "Japan", Y= 70 },
            new ChartData { X= "Australia", Y= 60 },
            new ChartData { X= "France", Y= 70 },
            new ChartData { X= "Germany", Y= 40 },
            new ChartData { X= "Italy", Y= 40 },
            new ChartData { X= "United states", Y= 30 },
        };
}

Axis Labels Positioning

Text customization

The Size, Color, FontFamily, FontWeight, FontStyle, Opacity, TextAlignment and TextOverflow may all be customized using the TextStyle property of multilevel labels.

text-customs.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                        <ChartCategory Start="-0.5" End="3.5" Text="Half yearly 1" MaximumTextWidth=50></ChartCategory>
                        <ChartCategory Start="3.5" End="7.5" Text="Half yearly 2" MaximumTextWidth=50></ChartCategory>
                   
                </ChartCategories>
                <ChartAxisMultiLevelLabelTextStyle Size="18px" Color="red"/>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{

    public int start = 0, end = 30;
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
            new ChartData { X= "Russia", Y= 50 },
            new ChartData { X= "China", Y= 40 },
            new ChartData { X= "Japan", Y= 70 },
            new ChartData { X= "Australia", Y= 60 },
            new ChartData { X= "France", Y= 70 },
            new ChartData { X= "Germany", Y= 40 },
            new ChartData { X= "Italy", Y= 40 },
            new ChartData { X= "United states", Y= 30 },
        };
}

Axis Labels Positioning

Border customization

The Width, Color, and Type of the border using the Border can be changed. Rectangle, Brace, WithoutBorder, WithoutTopBorder, WithoutTopandBottomBorder, Auto, and CurlyBrace are the different types of borders.

border-customs.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="650">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                        <ChartCategory Start="-0.5" End="3.5" Text="Half yearly 1" MaximumTextWidth="50"></ChartCategory>
                        <ChartCategory Start="3.5" End="7.5" Text="Half yearly 2" MaximumTextWidth="50"></ChartCategory>
                </ChartCategories>
                <ChartAxisMultiLevelLabelBorder Type="BorderType.Brace" Color="blue" Width=2></ChartAxisMultiLevelLabelBorder>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{

    public int start = 0, end = 30;
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
            new ChartData { X= "Russia", Y= 50 },
            new ChartData { X= "China", Y= 40 },
            new ChartData { X= "Japan", Y= 70 },
            new ChartData { X= "Australia", Y= 60 },
            new ChartData { X= "France", Y= 70 },
            new ChartData { X= "Germany", Y= 40 },
            new ChartData { X= "Italy", Y= 40 },
            new ChartData { X= "United states", Y= 30 },
        };
}

Axis Labels Positioning

Edge Label Placement

Long text labels at the axes’ edges may display partially in the chart. To avoid this, utilise the axis’ EdgeLabelPlacement property, which moves or hides the label within the chart area for a better appearance using the Shift, Hide Options. None will leave the text as it is.

edge.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="50%">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string Country { get; set; }
        public double Gold { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
    new ChartData{ Country= "United States", Gold=50  },
    new ChartData{ Country="China", Gold=40 },
    new ChartData{ Country= "Japan", Gold=70 },
    new ChartData{ Country= "Australia", Gold=60},
    new ChartData{ Country= "France", Gold=50 },
    new ChartData{ Country= "Germany", Gold=40 },
    new ChartData{ Country= "Italy", Gold=40 },
    new ChartData{ Country= "Sweden", Gold=30 }
    };
}

Labels Customization

An axis’ LabelStyle property allows you to change the Colour and Size of the axis labels.

labels-custom.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="50%">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisLabelBorder Width="1" Color="red"></ChartAxisLabelBorder>
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string Country { get; set; }
        public double Gold { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
    new ChartData{ Country= "United States", Gold=50  },
    new ChartData{ Country="China", Gold=40 },
    new ChartData{ Country= "Japan", Gold=70 },
    new ChartData{ Country= "Australia", Gold=60},
    new ChartData{ Country= "France", Gold=50 },
    new ChartData{ Country= "Germany", Gold=40 },
    new ChartData{ Country= "Italy", Gold=40 },
    new ChartData{ Country= "Sweden", Gold=30 }
    };
}

Label Trim

The label may be trimmed with EnableTrim, and the width of the labels may be modified with the MaximumLabelWidth property in the axis; 34px is the default value of MaximumLabelWidth property.

labels-trim.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals" Width="50%">
    <ChartPrimaryXAxis EnableTrim="true" MaximumLabelWidth="40" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string Country { get; set; }
        public double Gold { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
    new ChartData{ Country= "United States", Gold=50  },
    new ChartData{ Country="China", Gold=40 },
    new ChartData{ Country= "Japan", Gold=70 },
    new ChartData{ Country= "Australia", Gold=60},
    new ChartData{ Country= "France", Gold=50 },
    new ChartData{ Country= "Germany", Gold=40 },
    new ChartData{ Country= "Italy", Gold=40 },
    new ChartData{ Country= "Sweden", Gold=30 }
    };
}

Trim using maximum label width

Line break

The
tag can used to separate the long axis label into multiple lines utilizing the line break functionality.

line-break.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals">
    <ChartPrimaryXAxis Title="Country" EnableTrim="true" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Bar">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
        public string Country { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData> {
            new ChartData { X = "Germany", Y = 72, Country = "GER: 72"},
            new ChartData { X = "Russia", Y = 103.1, Country = "RUS: 103.1" },
            new ChartData { X = "Brazil", Y = 139.1, Country = "BRZ: 139.1" },
            new ChartData { X = "India", Y = 462.1, Country = "IND: 462.1" },
            new ChartData { X = "China", Y = 721.4, Country = "CHN: 721.4" },
            new ChartData { X = "United States<br>Of America", Y = 286.9, Country = "USA: 286.9" },
            new ChartData { X = "Great Britain", Y = 115.1, Country = "GBR: 115.1" },
            new ChartData { X = "Nigeria", Y = 97.2, Country = "NGR: 97.2" },
        };
}

Line break support

Label Format

Learn more about axis label format in relation to axis types from the pages below.

Refer to our Blazor Charts feature tour page for its groundbreaking feature representations and also explore our Blazor Chart example to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

Axis Labels in Blazor Chart component

Smart Axis Labels

Axis Labels Positioning

Multilevel Labels

Categories

Overflow

Alignment

Text customization

Border customization

Edge Label Placement

Labels Customization

Label Trim

Line break

Label Format

See Also