New to Telerik UI for ASP.NET Core? Download free 30-day trial

Axes Configuration

The Sparkline is a categorical (discrete) chart and has an implicit category and a value axis.

The axis orientation (horizontal or vertical) is inferred from the series type.

Setting the Category Axis

While category names are not visible by default, they are displayed in tooltips.

The following example demonstrates how to use the CategoryAxis object to set the category names.

    @(Html.Kendo().Sparkline()
        .Name("World")
        .Data(new double[] { 15.7, 16.7, 20, 23.5, 26.6 })
        .CategoryAxis(c => c
            .Categories(new string[] { "2005", "2006", "2007", "2008", "2009" })
        )
    )
    @{
        var data = new double[] { 15.7, 16.7, 20, 23.5, 26.6 };
        var categories = new string[] { "2005", "2006", "2007", "2008", "2009" };
    }
    <kendo-sparkline name="World"
                     data="@data">
                     <category-axis data="@categories">
                     </category-axis>
    </kendo-sparkline>

You can also bind the category name to a field of the data item.

    @(Html.Kendo().Sparkline()
        .Name("Sparkline")
        .Series(s => s.Bar(new object[] { new {
                country =  "United States",
                year = "2005",
                value = 67.96
            }, new {
                country = "United States",
                year = "2006",
                value = 68.93
            }
        }).Field("value"))
        .CategoryAxis(c => c.Field("year"))
    )
    @{
        var series_data = new object[] { 
            new {
                country =  "United States",
                year = "2005",
                value = 67.96
            }, 
            new {
                country = "United States",
                year = "2006",
                value = 68.93
            }
        };
    }
    <kendo-sparkline name="Sparkline">
                     <series>
                         <series-item type="bar" 
                             data="@series_data"
                             field="value">
                         </series-item>
                     </series>
                     <category-axis>
                        <category-axis-item field="year">
                        </category-axis-item>
                     </category-axis>
    </kendo-sparkline>

Displaying Dates

The category axis provides built-in support for displaying dates. This includes:

  • Automatic selection of granularity/base unit (minutes, hours, days, and so on)
  • Label formatting matched to the granularity
  • Grouping of categories into base units and series aggregates

Specifying categories of type Date switches the axis to a date mode. The automatic mode selection can be overridden by specifying .Type(ChartCategoryAxisType.Date).

Setting Base Units

To set the base units in the Sparkline chart, use any of the following approaches:

Default Configuration

To determine a default base, use the smallest duration between categories.

    .CategoryAxis(c => c
        .Categories(new DateTime[] { new DateTime(2005, 1, 1), new DateTime(2006, 1, 1) })
        // baseUnit is set to "years".
    )

    .CategoryAxis(c => c
        .Categories(new DateTime[] { new DateTime(2005, 1, 1), new DateTime(2005, 1, 2) })
        // baseUnit is set to "days".
    )
    @{
        // baseUnit is set to "years"
        var data1 = new DateTime[] { new DateTime(2005, 1, 1), new DateTime(2006, 1, 1) };
        // baseUnit is set to "days"
        var data2 = new DateTime[] { new DateTime(2005, 1, 1), new DateTime(2005, 1, 2) };
    }

    <category-axis data="@data1">
    </category-axis>

    <category-axis data="@data2">
    </category-axis>

Manual Configuration

You can also manually specify the BaseUnit.

The following options are valid:

  • Seconds
  • Minutes
  • Hours
  • Days
  • Weeks
  • Months
  • Years
  • Fit

Series Aggregates

If two or more categories fall within a base unit, its values are aggregated to display a single point.

    @(Html.Kendo().Sparkline()
            .Name("Sparkline")
            .Series(s => s.Column(new int[] { 20, 40, 45, 30, 50 }))
            .CategoryAxis(c => c
                .Categories(new DateTime[] {
                    new DateTime(2011,12,30),
                    new DateTime(2011,12,31),
                    new DateTime(2012,01,01),
                    new DateTime(2012,01,02),
                    new DateTime(2012,01,03)
                })
            )
    )
    @{
        var series_data = new int[] { 20, 40, 45, 30, 50 };
        var categories_data = new DateTime[] {
                    new DateTime(2011,12,30),
                    new DateTime(2011,12,31),
                    new DateTime(2012,01,01),
                    new DateTime(2012,01,02),
                    new DateTime(2012,01,03)
                };
    }
    <kendo-sparkline name="Sparkline">
                    <series>
                        <series-item data="@series_data">
                        </series-item>
                    </series>
                    <category-axis>
                       <category-axis-item categories="@categories_data">
                       </category-axis-item>
                    </category-axis>
    </kendo-sparkline>

The code from the previous example results in the following Sparkline chart. Note that values are displayed as are.

UI for ASP.NET Core Sparkline Chart with a date category axis

The following example demonstrates the Sparkline with its base unit changed to "years".

    .CategoryAxis(c => c
        .BaseUnit(ChartAxisBaseUnit.Years)
        .Categories(new DateTime[] {
            new DateTime(2011,12,30),
            new DateTime(2011,12,31),
            new DateTime(2012,01,01),
            new DateTime(2012,01,02),
            new DateTime(2012,01,03)
        })
    )
    @{
        var categories_data = new DateTime[] {
                    new DateTime(2011,12,30),
                    new DateTime(2011,12,31),
                    new DateTime(2012,01,01),
                    new DateTime(2012,01,02),
                    new DateTime(2012,01,03)
                };
    }
    <category-axis>
        <category-axis-item base-unit="ChartAxisBaseUnit.Years" categories="@categories_data">
        </category-axis-item>
    </category-axis>

The following example demonstrates a Sparkline with a grouped date category axis. Note the way the Sparkline displays the maximum value for each year.

UI for ASP.NET Core Sparkline Chart with a grouped date category axis

You can also change the aggregate function for each series.

    .Series(s => s
        .Column(new int[] { 20, 40, 45, 30, 50 })
        .Aggregate(ChartSeriesAggregate.Avg))
    @{
        var series_column_data = new int[] { 20, 40, 45, 30, 50 };
    }

    <series>
        <series-item data="@series_column_data" aggregate="ChartSeriesAggregate.Avg">
        </series-item>
    </series>

The available options are:

  • Min
  • Max
  • Count
  • Sum
  • Avg
  • First
  • SumOrNull

Setting the Value Axis

Currently, the Sparkline supports only numeric value axes.

Getting Started

To access the configuration options, use ValueAxis. The following example configures a numeric axis with a minimum value of 0 and a maximum value of 100.

    @(Html.Kendo().Sparkline()
            .Name("Sparkline")
            .Series(s => s
                .Column(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }))
            .ValueAxis(axis => axis.Numeric().Min(0).Max(100))
            .CategoryAxis(c => c
                .Categories(new string[] { "2005", "2006", "2007", "2008", "2009" })
            )
    )
    @{
        var series_column_data = new double[] { 15.7, 16.7, 20, 23.5, 26.6 };
        var categories_data = new string[] { "2005", "2006", "2007", "2008", "2009" };
    }
    <kendo-sparkline name="Sparkline">
                    <series>
                        <series-item data="@series_data">
                        </series-item>
                    </series>
                    <value-axis>
                        <value-axis-item type="numeric" min="0" max="100"></value-axis-item>
                    </value-axis>
                    <category-axis>
                       <category-axis-item categories="@categories_data">
                       </category-axis-item>
                    </category-axis>
    </kendo-sparkline>

Setting the Plot Bands

You can configure each axis to display bands with different colors for predefined value ranges. The category index (zero based) is used as a value for the category axis.

    @(Html.Kendo().Sparkline()
        .Name("temp-range")
        .Type(SparklineType.Bullet)
        .ValueAxis(axis => axis
            .Numeric()
            .Min(0)
            .Max(30)
            .PlotBands(bands =>
            {
                bands.Add().From(0).To(15).Color("#787878").Opacity(0.15);
                bands.Add().From(15).To(22).Color("#787878").Opacity(0.3);
                bands.Add().From(22).To(30).Color("#787878").Opacity(0.15);
            })
        )
        .Data(ViewBag.TemperatureRange)
    )
    <kendo-sparkline name="temp-range"
                     type="SparklineType.Bullet">
        <value-axis>
            <value-axis-item type="numeric" min="0" max="30">
                <plot-bands>
                    <chart-value-axis-plot-band from="0" to="15" color="#787878" opacity="0.15">
                    </chart-value-axis-plot-band>
                    <chart-value-axis-plot-band from="15" to="22" color="#787878" opacity="0.3">
                    </chart-value-axis-plot-band>
                    <chart-value-axis-plot-band from="22" to="30" color="#787878" opacity="0.15">
                    </chart-value-axis-plot-band>
                </plot-bands>
            </value-axis-item>
        </value-axis>
    </kendo-sparkline>

See Also

In this article