Is there a way to ensure the Labels in an Axis take a certain width? I'm using a bar chart and one of the data points has a long label - I'd like to make sure in the default chart's width/height (roughly 200x200) that all labels are readable.
I have a hunch I need to change something here:
<igCA:Axis AxisType="PrimaryX"> <igCA:Axis.Label> <igCA:Label FontSize="14"/> </igCA:Axis.Label> </igCA:Axis>
But the help file "Infragistics.Windows.Chart Namespace > Axis Class : Label Property" only says "Gets or sets the Axis Labels". The xamFeatureBrowser has no example to implement this minimum width for bar chart labels either.
I can take some screenshots to make this question a bit more clear if needed.
Here's my sample chart:
<igCA:XamChart x:Name="xcSample" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Style="{StaticResource XamChartStyle}" StartPaletteBrush="#FF076CB0" > <!-- Legend --> <igCA:XamChart.Legend> <igCA:Legend Visible="False"/> </igCA:XamChart.Legend> <!-- Series --> <igCA:XamChart.Series> <igCA:Series Label="MySampleChart" ChartType="Bar"> <igCA:Series.ChartParameters> <igCA:ChartParameter Type="PointWidth" Value="1.4"/> </igCA:Series.ChartParameters> <igCA:Series.Animation> <igCA:Animation BeginTime="00:00:01.25" Sequential="False"/> </igCA:Series.Animation> <igCA:Series.DataPoints> <igCA:DataPoint Value="0.05" Label="Sample 1" ToolTip="Sample 1 Tooltip"/> <igCA:DataPoint Value="0.09" Label="Sample 2"/> <igCA:DataPoint Value="0.10" Label="Sample 3"/> <igCA:DataPoint Value="0.11" Label="Very long Sample 4"/> <igCA:DataPoint Value="0.14" Label="Sample 5"/> <igCA:DataPoint Value="0.18" Label="Sample 6"/> <igCA:DataPoint Value="0.27" Label="Sample 7"/> </igCA:Series.DataPoints> <igCA:Series.Marker> <igCA:Marker Foreground="#FFFFFFFF"/> </igCA:Series.Marker> </igCA:Series> </igCA:XamChart.Series> <!-- Axes --> <igCA:XamChart.Axes> <igCA:Axis AxisType="PrimaryX"> <igCA:Axis.Label> <igCA:Label FontSize="14"/> </igCA:Axis.Label> <igCA:Axis.MajorGridline> <igCA:Mark Stroke="#FFECE6D9"/> </igCA:Axis.MajorGridline> </igCA:Axis> <igCA:Axis AxisType="PrimaryY" AutoRange="False" Minimum="0" Maximum="0.30" Unit="0.10"> <igCA:Axis.Label> <igCA:Label FontSize="14" Format="{}{0:p0}"/> </igCA:Axis.Label> <igCA:Axis.Stripes> <igCA:Stripe Fill="#FFECE6D9" Stroke="#004083C8"/> </igCA:Axis.Stripes> </igCA:Axis> <igCA:Axis AxisType="PrimaryZ"> <igCA:Axis.Label> <igCA:Label FontSize="14" Visible="False" Foreground="#00000000"/> </igCA:Axis.Label> </igCA:Axis> </igCA:XamChart.Axes> <igCA:XamChart.Caption> <igCA:Caption FontFamily="Arial" FontSize="16" FontStretch="Expanded" FontWeight="SemiBold" Text="My Sample Chart" /> </igCA:XamChart.Caption> </igCA:XamChart>
there is no feature to set a minimum or maximum pixel width for axis labels. however, the labels will scale down to a smaller size if they need more space to render, as long as Label.AutoResize is set to true, which it is by default.
Ok, I tried this in my example above:
<igCA:Axis AxisType="PrimaryX"> <igCA:Axis.Label Autoresize="False"> <igCA:Label FontSize="20" /> </igCA:Axis.Label> <igCA:Axis.MajorGridline> <igCA:Mark Stroke="#FFECE6D9"/> </igCA:Axis.MajorGridline> </igCA:Axis>
But it did not work - the labels still appear in a very small font.
It looks like Label.Autoresize="False" is not working.
The AutoResize = False does work when used like this:
<igCA:Axis AxisType="PrimaryX"> <igCA:Axis.Label> <igCA:Label FontSize="11" AutoResize="False" /> </igCA:Axis.Label> <igCA:Axis.MajorGridline> <igCA:Mark Stroke="#FFECE6D9"/> </igCA:Axis.MajorGridline> </igCA:Axis>
The data point's labels no longer become so small they can't be read. Unfortunately, with a default width of roughly 200x200 for the chart, this causes only 3 to 4 letters to be displayed, followed by "...".
What I'd like is for the full labels to be shown, pushing the data to the right if needed. Just setting AutoResize to False does not do that.
At least I'd like to show the user the full label value, but hovering over the data point's label does not show a tooltip with the full value. In addition since a DataPoint.Label is just a string, I can't set the tooltip myself.
these are both limitations of the chart for which I don't have any workarounds, unfortunately.
you can submit a feature request here: http://devcenter.infragistics.com/protected/requestfeature.aspx
Hi David,
I opened a ticket with support and they gave me the answer:
<igCA:XamChart.Scene> <igCA:Scene > <igCA:Scene.GridArea> <igCA:GridArea MarginType="Percent" Margin="10,0,0,30" /> </igCA:Scene.GridArea> </igCA:Scene></igCA:XamChart.Scene>
By setting the correct percentage, I can force the labels on the y axis (x axis in the bar chart) to have a minimum width for my default width.
glad you found a solution. it sounds like Developer Support saw the problem from a different perspective, and that made all the difference.
i'm not sure why that happens, but it sounds like the chart is being updated while it's rendering, like from a separate thread.
i couldn't reproduce this, however, so i can't really tell what's wrong. attached is the sample project i used to test it out.
I am doing something similar, but instead of hardcoding the margin, I am binding it. Since my labels are dynamic, I only want to set my margin if the lenth of the longest label > N. Here is what I have in my code:
<igCA:XamChart.Scene>
<igCA:Scene>
<igCA:Scene.GridArea>
<igCA:GridArea
MarginType="Percent"
Margin="{Binding Path=YLabelMargin, Converter={StaticResource LeftMarginConverter}}" />
</igCA:Scene.GridArea>
</igCA:Scene>
</igCA:XamChart.Scene>
where my LeftMarginConverter is as follows:
public class LeftMarginConverter : IValueConverter
#region
{
}
#endregion
When I do this, my app crashes with teh following stack:
Any thoughts?
Thanks,
Dianne.