How to add a ScrollBar to chart

Question

I have developed a c# WPF application I wanted to do a zoom or a scrollbar to my chart view,cause the data is merging one upon another and I believe zoom or adding a scroll bar would be a solution. so far I have this. BTW I am doing a column chart.

public partial class ChartControl : UserControl
{
    System.Windows.Forms.ScrollableControl ctl = new System.Windows.Forms.ScrollableControl();
    public ChartControl()
    {
        InitializeComponent();
        scrollbar();
    }

    private System.Windows.Forms.ScrollBars scrollbar()
    {
        if (ctl.HorizontalScroll.Visible)
            return ctl.VerticalScroll.Visible ? System.Windows.Forms.ScrollBars.Both : System.Windows.Forms.ScrollBars.Horizontal;
        else
            return ctl.VerticalScroll.Visible ? System.Windows.Forms.ScrollBars.Vertical : System.Windows.Forms.ScrollBars.Horizontal;
    }

    private void Grid_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        if (e.Delta > 0)
        {
            chartzoom.ScaleX += 1;
            chartzoom.ScaleY += 1;
        }
        else
        {
            chartzoom.ScaleX -= 1;
            chartzoom.ScaleY -= 1;
        }
    }
}

zoom is not very effective, is there a way to add a scroll bar or a proper zooming property to it.

Xaml Code as follows::

  <Grid MouseWheel="Grid_MouseWheel">

        <dvc:Chart Canvas.Top="80" Name="chart"  PreviewMouseWheel="Grid_MouseWheel"   >

            <dvc:Chart.LayoutTransform>
                <ScaleTransform x:Name="chartzoom"></ScaleTransform>              
            </dvc:Chart.LayoutTransform> 

            <dvc:Chart.Series >
                <dvc:ColumnSeries Title="{Binding LineGraphTitledg1}"
                                  ItemsSource="{Binding Data}"
                                  IndependentValueBinding="{Binding Path=Time}"
                                  DependentValueBinding="{Binding Path=DG1}"  />
                <dvc:ColumnSeries Title="{Binding LineGraphTitledg2 }"
                                  ItemsSource="{Binding Data}"
                                  IndependentValueBinding="{Binding Path=Time}"
                                  DependentValueBinding="{Binding Path=DG2}" />
                <dvc:ColumnSeries Title="{Binding LineGraphTitledg3}"
                                  ItemsSource="{Binding Data}"
                                  IndependentValueBinding="{Binding Path=Time}"
                                  DependentValueBinding="{Binding Path=DG3}" />
                <dvc:ColumnSeries Title="{Binding LineGraphTitledgunits}"
                                  ItemsSource="{Binding Dataunitvsfuel}"
                                  IndependentValueBinding="{Binding Path=kwh}"
                                  DependentValueBinding="{Binding Path=fuel}"
                                  IsSelectionEnabled="True" />                                              
            </dvc:Chart.Series>
        </dvc:Chart>

Answer 1

I see the Chart control does not support scrolling itself. So wrapping it inside a ScrollViewer provides the solution. For this to work you have set the chart to a fixed or minimum size.

<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <dvc:Chart Name="chart" MinWidth="500" MinHeight="300">
        (...)
    </dvc:Chart>
</ScrollViewer>

Answer 2

Wrapping the chart in a ScrollView in the Xaml will allow you to scroll.