Data labels are cropped right side of Area Chart
I took your spline area chart example and just added data labels, and they are cropped on the left side.
See image below, should show the entire "3.1%".
Example code is below.
Things I've tried without luck:
ChartPrimaryXAxis PlotOffsetRight, EdgeLabelPlacement
ChartDataLabel Position, Alignment
ChartDataLabelMargin
ChartMarker has an Offset parameter, but unsure how to use.
Thanks for any help!
@page "/chart/spline-area"
@using Syncfusion.Blazor.Charts
@inject NavigationManager NavigationManager
<div class="control-section">
<SfChart Title="Inflation Rate in Percentage">
<ChartEvents />
<ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="y" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis LabelFormat="{value}%" Minimum="0" Maximum="4" Interval="1">
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@SplineData" Name="US" XName="xValue" Width="2"
Opacity="0.5" YName="yValue" Type="ChartSeriesType.SplineArea">
<ChartMarker Visible="true" Height="10" Width="10" Shape="ChartShape.Circle">
<ChartDataLabel Visible="true" Position="LabelPosition.Top" Alignment="Alignment.Far">
@*<ChartDataLabelMargin Right="100" Left="100" Top="0" Bottom="0"></ChartDataLabelMargin>*@
@*<ChartDataLabelFont size="1.5rem" Opacity="0.7"></ChartDataLabelFont>*@
</ChartDataLabel>
</ChartMarker>
</ChartSeries>
<ChartSeries DataSource="@SplineData" Name="France" XName="xValue" Width="2"
Opacity="0.5" YName="yValue1" Type="ChartSeriesType.SplineArea">
</ChartSeries>
<ChartSeries DataSource="@SplineData" Name="Germany" XName="xValue" Width="2"
Opacity="0.5" YName="yValue1" Type="ChartSeriesType.SplineArea">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
@code{
public class SplineAreaChartData
{
public DateTime xValue { get; set; }
public double yValue { get; set; }
public double yValue1 { get; set; }
public double yValue2 { get; set; }
}
public List<SplineAreaChartData> SplineData = new List<SplineAreaChartData>
{
new SplineAreaChartData { xValue = new DateTime(2002, 01, 01), yValue = 2.2, yValue1 = 2, yValue2 = 0.8 },
new SplineAreaChartData { xValue = new DateTime(2003, 01, 01), yValue = 3.4, yValue1 = 1.7, yValue2 = 1.3 },
new SplineAreaChartData { xValue = new DateTime(2004, 01, 01), yValue = 2.8, yValue1 = 1.8, yValue2 = 1.1 },
new SplineAreaChartData { xValue = new DateTime(2005, 01, 01), yValue = 1.6, yValue1 = 2.1, yValue2 = 1.6 },
new SplineAreaChartData { xValue = new DateTime(2006, 01, 01), yValue = 2.3, yValue1 = 2.3, yValue2 = 2 },
new SplineAreaChartData { xValue = new DateTime(2007, 01, 01), yValue = 2.5, yValue1 = 1.7, yValue2 = 1.7 },
new SplineAreaChartData { xValue = new DateTime(2008, 01, 01), yValue = 2.9, yValue1 = 1.5, yValue2 = 2.3 },
new SplineAreaChartData { xValue = new DateTime(2009, 01, 01), yValue = 3.8, yValue1 = 2.8, yValue2 = 2.7 },
new SplineAreaChartData { xValue = new DateTime(2010, 01, 01), yValue = 1.4, yValue1 = 1.5, yValue2 = 1.1 },
new SplineAreaChartData { xValue = new DateTime(2011, 01, 01), yValue = 3.1, yValue1 = 2.3, yValue2 = 2.3 },
};
string CurrentUri;
}
SIGN IN To post a reply.
7 Replies
Thank you. I've already tried RangePadding but it doesn't look good when you have few datapoints on the X axis.
I only need a few more pixels to display the entire label text.
See my design below with your suggested solution:
SIGN IN To post a reply.
