Silverlight CategoryAxis X widht stretch horizontally with scrollView

Question

I have Working Column Series.

I have around 50+ multiple column series to display, when there are more number of bars it shrinks the bar width and adjusts to chart width.

So i want to add a scroll only to Category Axis X and scroll horizontally with fixing the width of bars, if its more number of series the X axis should stretch horizontally.

here is the screen shot:

enter image description here

In the screen shot you can see that the 3rd series is cutting, and its not scrolling.

This is what i have tried:

<charting:Chart Name="barChart"
                                Style="{StaticResource PhoneChartStyle}"
                                Template="{StaticResource BarChartTemplate}">
                    <charting:Chart.Axes>
                        <charting:LinearAxis ShowGridLines="True" Title="Scores" Orientation="Y" Minimum="0" Maximum="50" Interval="10"/>
                        <charting:CategoryAxis HorizontalContentAlignment="Stretch"
                                               HorizontalAlignment="Stretch"
                                               Title="Fruits" 
                                               Width="1000"
                                               Orientation="X" 
                                               ScrollViewer.HorizontalScrollBarVisibility="Visible">
                        </charting:CategoryAxis>
                    </charting:Chart.Axes>
                    <charting:Chart.Series>
                        <charting:ColumnSeries 
                                    Title="Apple"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Oranges"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Guava"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                    </charting:Chart.Series>
                </charting:Chart>*

Are you set barChart ItemSource dynamically or 50 constant series in you chart ??? — Jaihind
@Jaihind its dynamic, it might contain 50 or 100 or some value — Goofy

Jaihind Jaihind · Accepted Answer · 2014-03-13T13:52:20

I had same problem and this trick solves the problem. May this will also help you.

<ScrollViewer Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0,10">
<charting:Chart Name="barChart"
                                Style="{StaticResource PhoneChartStyle}"
                                Template="{StaticResource BarChartTemplate}" Width="460">
                    <charting:Chart.Axes>
                        <charting:LinearAxis ShowGridLines="True" Title="Scores" Orientation="Y" Minimum="0" Maximum="50" Interval="10"/>
                        <charting:CategoryAxis HorizontalContentAlignment="Stretch"
                                               HorizontalAlignment="Stretch"
                                               Title="Fruits" 
                                               Width="1000"
                                               Orientation="X" 
                                               ScrollViewer.HorizontalScrollBarVisibility="Visible">
                        </charting:CategoryAxis>
                    </charting:Chart.Axes>
                    <charting:Chart.Series>
                        <charting:ColumnSeries 
                                    Title="Apple"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Oranges"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Guava"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                    </charting:Chart.Series>
                </charting:Chart>
</ScrollViewer>

//code behind where you set ItemSource of barChart //I assume your itemSource should be a List collection = new List(); //barChart.ItemSource = collection ;

if (collection .Count() > 2)
{
   barChart.Width = barChart.Width + (collection .Count() * 80);
}

Silverlight CategoryAxis X widht stretch horizontally with scrollView

1 Answers