Blazor

Search results

Axis Labels in Blazor Chart component

08 Apr 2021 / 3 minutes to read

Smart Axis Labels

When the axis labels overlap with each other, you can use LabelIntersectAction property in the axis, to place them smartly.

When setting LabelIntersectAction 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 setting LabelIntersectAction 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 setting LabelIntersectAction 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

By default, the axis labels can be placed Outside of the axis line and this also can be placed Inside the axis line using the LabelPosition property.

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

Any number of levels of labels can be added to the axis using the MultiLevelLabels property. This property can be configured using the following properties.

Overflow

Using the Overflow property, you can Trim or Wrap the multilevel labels.

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.

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 TextStyle property of multilevel labels provides options to customize the Size, Color, FontFamily, FontWeight, FontStyle, Opacity, TextAlignment and TextOverflow.

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

Using the Border property, you can customize the Width, Color, and Type. The Type of border are Rectangle, Brace, WithoutBorder, WithoutTopBorder, WithoutTopandBottomBorder and CurlyBrace.

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

Labels with long text at the edges of the axis may appear partially in the chart. To avoid this, use EdgeLabelPlacement property in axis, which moves the label inside the chart area for better appearance or hides it.

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

The LabelStyle property of an axis provides options to customize the color and font 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

You can trim the label using EnableTrim and width of the labels can also be customized using MaximumLabelWidth property in the axis, by default maximum width of the label is 34px.

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

Line break feature used to break the long axis label into multiple lines by using <br> tag.

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

Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data 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