Add custom label format to axis

samples/LineGraphSample/MainWindow.xaml.cs

@@ -19,9 +19,13 @@ public MainWindow()
         {
             InitializeComponent();
 
+            var dates = new double[200];
             double[] x = new double[200];
             for (int i = 0; i < x.Length; i++)
+            {
                 x[i] = 3.1415 * i / (x.Length - 1);
+                dates[i] = DateTime.Now.AddDays(i).Ticks;
+            }
 
             for (int i = 0; i < 25; i++)
             {
@@ -30,8 +34,9 @@ public MainWindow()
                 lg.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, (byte)(i * 10), 0));
                 lg.Description = String.Format("Data series {0}", i + 1);
                 lg.StrokeThickness = 2;
-                lg.Plot(x, x.Select(v => Math.Sin(v + i / 10.0)).ToArray());
+                lg.Plot(dates, x.Select(v => Math.Sin(v + i / 10.0)).ToArray());
             }
+            plotter.XLabelProvider = new DateLabelProvider();
         }
     }
 

src/Axes/Axis.cs

@@ -169,6 +169,28 @@ public DataTransform DataTransform
                     }
                 }));
 
+
+        [Description("Label format of Axis")]
+        [Category("InteractiveDataDisplay")]
+        public ILabelProvider LabelProvider
+        {
+            get { return (ILabelProvider)GetValue(LabelProviderProperty); }
+            set { SetValue(LabelProviderProperty, value); }
+        }
+        /// <summary>
+        /// Gets or Sets label format of axis
+        /// </summary>
+        public static readonly DependencyProperty LabelProviderProperty =
+            DependencyProperty.Register("LabelProvider", typeof(ILabelProvider), typeof(Axis), new PropertyMetadata(new LabelProvider(),
+                (o, e) =>
+                {
+                    Axis axis = (Axis)o;
+                    if (axis != null) {
+                        axis.labelProvider = e.NewValue as ILabelProvider;
+                        axis.InvalidateMeasure();
+                    }
+                }));
+
         /// <summary>
         /// Gets or sets the brush for labels and ticks of axis
         /// </summary>

src/Axes/DateLabelProvider.cs

@@ -0,0 +1,42 @@
+// Copyright © Microsoft Corporation. All Rights Reserved.
+// Licensed under the MIT License.
+
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Collections.Generic;
+using System.Globalization;
+
+namespace InteractiveDataDisplay.WPF
+{
+    /// <summary>
+    /// Provides mechanisms to generate labels displayed on an axis by DateTime ticks. 
+    /// </summary>
+    public class DateLabelProvider : ILabelProvider
+    {
+        public string Format { get; set; } = "yyyy-MM-dd HH:mm:ss";
+
+        /// <summary>
+        /// Generates an array of labels from an array of double.
+        /// </summary>
+        /// <param name="ticks">An array of double ticks.</param>
+        /// <returns>An array of <see cref="FrameworkElement"/>.</returns>
+        public FrameworkElement[] GetLabels(double[] ticks)
+        {
+            if (ticks == null)
+                throw new ArgumentNullException(nameof(ticks));
+
+            List<TextBlock> Labels = new List<TextBlock>();
+            foreach (double tick in ticks)
+            {
+                TextBlock text = new TextBlock
+                {
+                    Text = new DateTime((long)tick).ToString(Format)
+                };
+                Labels.Add(text);
+            }
+            return Labels.ToArray();
+        }
+    }
+}
+

src/Axes/PlotAxis.cs

@@ -128,6 +128,21 @@ public AxisOrientation AxisOrientation
         public static readonly DependencyProperty AxisOrientationProperty =
             DependencyProperty.Register("AxisOrientation", typeof(AxisOrientation), typeof(PlotAxis), new PropertyMetadata(AxisOrientation.Bottom));
 
+        /// <summary>
+        /// Gets or Sets label format of axis
+        /// </summary>
+        [Category("InteractiveDataDisplay")]
+        [Description("Defines label format of axis")]
+        public ILabelProvider LabelProvider
+        {
+            get { return (ILabelProvider)GetValue(LabelProviderProperty); }
+            set { SetValue(LabelProviderProperty, value); }
+        }
+
+        /// <summary>Identify <see cref="LabelProvider"/> property</summary>
+        public static readonly DependencyProperty LabelProviderProperty =
+            DependencyProperty.Register("LabelProvider", typeof(ILabelProvider), typeof(PlotAxis), new PropertyMetadata(new LabelProvider()));
+
         /// <summary>Gets or sets transform from user data to horizontal plot coordinate. 
         /// By default transform is <see cref="IdentityDataTransform"/>
         /// </summary>

src/Chart.cs

@@ -296,5 +296,28 @@ public bool IsHorizontalNavigationEnabled
         public static readonly DependencyProperty IsHorizontalNavigationEnabledProperty =
             DependencyProperty.Register("IsHorizontalNavigationEnabled", typeof(bool), typeof(Chart), new PropertyMetadata(true));
 
-    }       
+        /// <summary>Gets or sets X Label provider</summary>
+        [Category("InteractiveDataDisplay")]
+        public ILabelProvider XLabelProvider
+        {
+            get { return (ILabelProvider)GetValue(XLabelProviderProperty); }
+            set { SetValue(XLabelProviderProperty, value); }
+        }
+
+        /// <summary>Identifies <see cref="XLabelProvider"/> property</summary>
+        public static readonly DependencyProperty XLabelProviderProperty =
+            DependencyProperty.Register("XLabelProvider", typeof(ILabelProvider), typeof(Chart), new PropertyMetadata(new LabelProvider()));
+
+        /// <summary>Gets or sets Y Label provider</summary>
+        [Category("InteractiveDataDisplay")]
+        public ILabelProvider YLabelProvider
+        {
+            get { return (ILabelProvider)GetValue(YLabelProviderProperty); }
+            set { SetValue(YLabelProviderProperty, value); }
+        }
+
+        /// <summary>Identifies <see cref="YLabelProvider"/> property</summary>
+        public static readonly DependencyProperty YLabelProviderProperty =
+            DependencyProperty.Register("YLabelProvider", typeof(ILabelProvider), typeof(Chart), new PropertyMetadata(new LabelProvider()));
+    }
 }

src/InteractiveDataDisplay.WPF.csproj

@@ -76,6 +76,7 @@
     <Compile Include="Axes\AxisGrid.cs" />
     <Compile Include="Axes\AxisOrientation.cs" />
     <Compile Include="Axes\ILabelProvider.cs" />
+    <Compile Include="Axes\DateLabelProvider.cs" />
     <Compile Include="Axes\LabelProvider.cs" />
     <Compile Include="Axes\MinorTicksProvider.cs" />
     <Compile Include="Axes\PlotAxis.cs" />

src/Themes/Generic.xaml

@@ -15,7 +15,8 @@
                         <d3:Axis x:Name="PART_Axis" 
                                  AxisOrientation="{Binding AxisOrientation, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                  Ticks="{Binding Ticks, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                                 Foreground="{Binding Foreground, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
+                                 Foreground="{Binding Foreground, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                 LabelProvider="{Binding LabelProvider, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
                         <ContentPresenter/>
                     </Grid>
                 </ControlTemplate>
@@ -51,7 +52,8 @@
                             <d3:PlotAxis x:Name="PART_verticalAxis"
                                          d3:Figure.Placement="Left" 
                                          AxisOrientation="Left"
-                                         Foreground="{TemplateBinding Foreground}">
+                                         Foreground="{TemplateBinding Foreground}"
+                                         LabelProvider="{TemplateBinding YLabelProvider}">
                                 <d3:MouseNavigation IsHorizontalNavigationEnabled="False"/>
                             </d3:PlotAxis>
                             <d3:AxisGrid x:Name="PART_axisGrid"
@@ -76,7 +78,8 @@
                             <d3:PlotAxis x:Name="PART_horizontalAxis"
                                          d3:Figure.Placement="Bottom" 
                                          AxisOrientation="Bottom"
-                                         Foreground="{TemplateBinding Foreground}">
+                                         Foreground="{TemplateBinding Foreground}"
+                                         LabelProvider="{TemplateBinding XLabelProvider}">
                                 <d3:MouseNavigation IsVerticalNavigationEnabled="False"/>
                             </d3:PlotAxis>
                             <ContentPresenter/>