When the axis labels overlap with each other, you can use LabelIntersectAction
property in the axis, to place them smartly.
When setting LabelIntersectAction
as Hide
@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 }
};
}
When setting LabelIntersectAction
as Rotate45
@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 }
};
}
When setting LabelIntersectAction
as Rotate90
@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 }
};
}
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.
@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 }
};
}
Any number of levels of labels can be added to an axis using the MultiLevelLabels
property. This property can be configured using the following properties.
Using the categories, you can configure the Start
, End
, Text
, and MaximumTextWidth
of multilevel labels.
@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>
</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 },
};
}
Using the Overflow
property, you can Trim
or Wrap
the multilevel labels.
@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 },
};
}
The Alignment
property provides option to position the multilevel labels at Far
, Center
, or Near
.
@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 },
};
}
The TextStyle
property of multilevel labels provides options to customize the Size
, Color
, FontFamily
,
FontWeight
, FontStyle
, Opacity
, TextAlignment
and TextOverflow
.
@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 },
};
}
Using the Border
property, you can customize the Width
, Color
, and Type
. The Type
of border
are Rectangle
, Brace
, WithoutBorder
, WithoutTopBorder
, WithoutTopandBottomBorder
and CurlyBrace
.
@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 },
};
}
Labels with long text at the edges of an 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.
@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 }
};
}
The LabelStyle
property of an axis provides options to customize the color and font of the axis labels.
@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 }
};
}
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
.
@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 }
};
}
Line break feature used to break the long axis label into multiple lines by using
<br>
tag.
@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" },
};
}