diff --git a/maui-toolkit-toc.html b/maui-toolkit-toc.html index 128b8b1d..d8507211 100644 --- a/maui-toolkit-toc.html +++ b/maui-toolkit-toc.html @@ -481,6 +481,7 @@
  • Overview
  • Getting Started
  • Sparkline Types
  • +
  • Axis types
  • Markers
  • Customize Data Points
  • diff --git a/maui-toolkit/Spark-Charts/getting-started.md b/maui-toolkit/Spark-Charts/getting-started.md index 625ac270..e2336cb6 100644 --- a/maui-toolkit/Spark-Charts/getting-started.md +++ b/maui-toolkit/Spark-Charts/getting-started.md @@ -405,7 +405,7 @@ The following code example gives you the complete code of above configurations. {% highlight xaml %} -ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" + + + +{% endhighlight %} + +{% highlight c# %} + +SfSparkColumnChart sparkchart = new SfSparkColumnChart() +{ + ItemsSource = new SparkChartViewModel().Data, + YBindingPath = "Value", + XBindingPath = "OrderName", + AxisType = SparkChartAxisType.Category +}; +this.Content = sparkchart; + +{% endhighlight %} + +{% endtabs %} + + +### DateTime AxisType + +The `DateTime` AxisType treats X-axis values as date-time instances. This axis type is used to emphasize changes in values over time, primarily for communicating trends and chronological data visualization rather than individual data values. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + +SfSparkColumnChart sparkchart = new SfSparkColumnChart() +{ + ItemsSource = new SparkChartViewModel().Data, + YBindingPath = "Value", + XBindingPath = "OrderDate", + AxisType = SparkChartAxisType.DateTime +}; + +this.Content = sparkchart; + +{% endhighlight %} + +{% endtabs %} + + +### Numeric AxisType + +The `Numeric` AxisType treats X-axis values as numbers. Use this when your X-axis data contains numerical values that represent quantities, indices, or continuous numerical data on a numerical scale. + +{% tabs %} + +{% highlight xaml %} + + + + +{% endhighlight %} + +{% highlight c# %} + +SfSparkColumnChart sparkchart = new SfSparkColumnChart() +{ + ItemsSource = new SparkChartViewModel().Data, + YBindingPath = "Value", + XBindingPath = "OrderID", + AxisType = SparkChartAxisType.Numeric +}; +this.Content = sparkchart; + +{% endhighlight %} + +{% endtabs %}