title: How to modify X-Axis of ChartingToolkit LineChart
body: <p>I have trouble formatting the x axis of my graph accordingly. The x axis shows values from the type DateTime. I would like to control which information is displayed on the x axis. For example only Seconds and Milliseconds. In addition I would like to set an interval for the x axis, if there are too many values to display.</p>
  
  <p>Here is my current state:</p>
  
  <p>I am using the chartingToolkit with following reference, to display a LineChart with two lines:</p>
  
  <pre><code>xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
  </code></pre>
  
  <p>The data input for the graph look like this:</p>
  
  <pre><code>public ObservableCollection&lt;List&lt;KeyValuePair&lt;DateTime,int&gt;&gt;&gt; ListOutputGraph { get; set; }
  </code></pre>
  
  <p>This observable collection contains a list for each of the lines to be displayed</p>
  
  <p>Now I plot the graph via XAML like this:</p>
  
  <pre><code>                &lt;chartingToolkit:Chart Name="LineChart1" BorderThickness="0" VerticalAlignment="Top" Margin="0,-30,0,0" Height="382"&gt;
  
                      &lt;!-- Line P --&gt;
                      &lt;chartingToolkit:LineSeries Name="P" Title="P Out" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [0]}" IsSelectionEnabled="True" &gt;
                          &lt;chartingToolkit:LineSeries.DataPointStyle&gt;
                              &lt;Style TargetType="chartingToolkit:DataPoint"&gt;
                                  &lt;Setter Property="Background" Value="Red" /&gt;
                                  &lt;Setter Property="Template"&gt;
                                      &lt;Setter.Value&gt;
                                          &lt;ControlTemplate TargetType="chartingToolkit:LineDataPoint"&gt;
                                              &lt;Grid x:Name="Root" Opacity="1"&gt;
                                                  &lt;ToolTipService.ToolTip&gt;
                                                      &lt;StackPanel Margin="2,2,2,2"&gt;
                                                          &lt;ContentControl Content="Data Row: P" FontWeight="Bold" /&gt;
                                                          &lt;ContentControl Content="{TemplateBinding IndependentValue}"  ContentStringFormat="Time:     {0}" /&gt;
                                                          &lt;ContentControl Content="{TemplateBinding DependentValue}" ContentStringFormat="Value:    {0}"/&gt;
                                                      &lt;/StackPanel&gt;
                                                  &lt;/ToolTipService.ToolTip&gt;
                                                  &lt;Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/&gt;
                                              &lt;/Grid&gt;
                                          &lt;/ControlTemplate&gt;
                                      &lt;/Setter.Value&gt;
                                  &lt;/Setter&gt;
                              &lt;/Style&gt;
                          &lt;/chartingToolkit:LineSeries.DataPointStyle&gt;
                      &lt;/chartingToolkit:LineSeries&gt;
  
                      &lt;!-- Line L --&gt;
                      &lt;chartingToolkit:LineSeries Name="L" Title="L Out"  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [1]}" IsSelectionEnabled="True" &gt;
                          &lt;chartingToolkit:LineSeries.DataPointStyle&gt;
                              &lt;Style TargetType="chartingToolkit:DataPoint"&gt;
                                  &lt;Setter Property="Background" Value="Blue" /&gt;
                                  &lt;Setter Property="Template"&gt;
                                      &lt;Setter.Value&gt;
                                          &lt;ControlTemplate TargetType="chartingToolkit:LineDataPoint"&gt;
                                              &lt;Grid x:Name="Root" Opacity="1"&gt;
                                                  &lt;ToolTipService.ToolTip&gt;
                                                      &lt;StackPanel Margin="2,2,2,2"&gt;
                                                          &lt;ContentControl Content="Data Row: L" FontWeight="Bold" /&gt;
                                                          &lt;ContentControl Content="{TemplateBinding IndependentValue}"  ContentStringFormat="Time:      {0}" /&gt;
                                                          &lt;ContentControl Content="{TemplateBinding DependentValue}" ContentStringFormat="Value:     {0}"/&gt;
                                                      &lt;/StackPanel&gt;
                                                  &lt;/ToolTipService.ToolTip&gt;
                                                  &lt;Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/&gt;
                                              &lt;/Grid&gt;
                                          &lt;/ControlTemplate&gt;
                                      &lt;/Setter.Value&gt;
                                  &lt;/Setter&gt;
                              &lt;/Style&gt;
                          &lt;/chartingToolkit:LineSeries.DataPointStyle&gt;
                      &lt;/chartingToolkit:LineSeries&gt;
                  &lt;/chartingToolkit:Chart&gt;
  </code></pre>
  
  <hr>
  
  <p>The result currently looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/3KMoc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3KMoc.png" alt="enter image description here"></a></p>