We have a chart with a numeric Y axis and a Category X axis and a column Series of data. We need to produce a Bar Chart (A histogram) BUT we need the X Axis labels to appear at the category breaks and not centered under the category bar.
This is relativly simple if you have a fixed number of categories and a fixed chart size using transforms and transform origin in the label datatemplate BUT... Our users can dynamically change the number of categories and resize the screen. Any idea how we can accomplish this? How do I know the width of the label as it does not honor the "Stretch" attribute and grow/shrink with the label width.
<ig:CategoryXAxis.Label>
<DataTemplate>
<!--Text="{Binding Item.EndX}"-->
<TextBlock VerticalAlignment="Stretch" HorizontalAlignment="Stretch" RenderTransformOrigin="0,0">
<TextBlock.Text>
<MultiBinding Converter="{StaticResource Axis_DisplayUnitsMultiConverterInstance}">
<Binding Path="Item.EndX" />
<Binding Path="Axis.DataContext.XAxis"/>
</MultiBinding>
</TextBlock.Text>
<TextBlock.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90" />
<TranslateTransform Y="90" />
</TransformGroup>
</TextBlock.LayoutTransform>
</TextBlock>
</DataTemplate>
</ig:CategoryXAxis.Label>
thanks
Hello Rod,
I am just checking if my last reply was helpful for you.
If you require any further assistance, please do not hesitate to ask.
I have made some further testing on this. I was able to change the TranslateTransform in the converter so that the labels are not shifted down:
group.Children.Add(new TranslateTransform { Y = -(len / 2)});
//group.Children.Add(new RotateTransform { Angle = 90, CenterX = (len / 2), CenterY = (height / 2) });
Please note that I have commented out the RotateTransform and instead I am using the Angle property of the AxisLabelSettings in order to rotate the label. This is little modification that I believe can help you to display the labels in the space between the bars. I have attached the modified project with version 12.1.
Feel free to let me know if you have any questions or concerns.
I really dont see any functional difference between this one and the last. Your example is running into many of the problems that I am encountering as well.
As for text trimming/rearanging - Add 2-3 more EnergyProduction to the collection and give them a very long Country name. you will see the labels stairstep & get truncated. This iswhen they have lots of room and are not overlaying other labels.
If you make the chart smaller (Window size adjusting) you can get to a point where the labels all appear anchored on the X-axis, but you only see 3 1/2 characters of the label and a bunch of white space below it. If you make the label extent larger, the issue just gets worse.
The offset still doesnt line up right
|----|----|----|----|
So if the bars appear where the ---- are and the | is the seperator for the categories - We need the category labels to appear on the |
I attached a document so you can see what I am encountering - Also we are using 12.1 not 12.2 - Might there be some upgrade you are utilizing from 12.2 that is making it render properly. What is the best way to pase these screen shots directly into a forum post?
The labels are rearranged in order that their text could be displayed and not cut off. If the space is not enough even with this rearrangement, the text is trimmed. I have made a little modification to the project I have provided you. I have change the TranslateTrasform so that I do not use offset with value 5 and do not set the Y transform to any value. I have also changed the RotateTransform by adding values to the CenterX and CenterY properties so that the labels rotate around its center.
If you want the text to fit in the space between the columns, you could add a value for the Gap property of the CategoryXAxis. In the provided sample I have set this to 50. You could modify these settings to fit your specific requirements.
Maria - Interesting approach, but it doesnt work too well after the initial render.
1) Resize the screen so the columns get small
- See the labels start to staristep down
- also see th elabels appear further and further from the axis itself.
2) Resize screen so columns get larger,Labels start to migrate in their location and no longer fall on the gap
3) Dynamically change the number of categories - the offset is not correct. Assuming we could do a count on the collection bound to the datachart series and use that instead of the hard coded '5'