Sparkline Elements

This guide provides a detailed overview of dxSparkline elements. Each topic in this guide contains a brief description of an element and its main configurable features.

Below is the element map of the dxSparkline widget. It may be helpful as you begin learning about the capabilities of this widget. Hover over an element on the map to discover the name of this element. A click on an element navigates you to a topic devoted to this element.

DevExtreme dxSparkline Elements

Series

A series is a group of related data points. The most important characteristic of a series is its type, which determines a specific visual presentation of data. In this topic, you will learn how to set a series type and configure series settings.

DevExtreme ChartJS Sparkline

To set the series type that best suits your needs, specify the type option of the main configuration object. By default, the line series type is set.

JavaScript
var sparklineOptions = {
    type: 'line',
    // ...
};

Since sparklines are simple in nature, sparkline series offer few configuration options. The majority of series types, except bar and win-loss, have the lineColor and lineWidth options to customize series' appearance. In turn, bar series have the barPositiveColor and barNegativeColor options, and win-loss series have winColor and lossColor options for the same purpose.

Series are constructed on the base of data that can be provided using many different approaches. To review them all, refer to the Data Binding guide.

To learn more about series types featured in the dxSparkline widget, refer to the Sparkline Series Types guide.

Series Points

A series point is a visual representation of a data point. In the majority of series types, series points are invisible and used only internally to build a sparkline on them. However, in the bar and win-loss series types, series points represented by bars are, in fact, visible. This is so, because these bars are not only series points, but also a series itself. For more information about bar and win-loss series, refer to the Bar and Win-Loss topics.

Although regular series points cannot be indicated on a sparkline, certain series points can. These are points that represent extreme values, such as maximum and minimum, first and last.

NOTE: In bar and win-loss series, extreme points are represented by bars.

DevExtreme ChartJS Sparkline

To make the maximum and minimum series points indicated on a sparkline, set the showMinMax option to true.

JavaScript
var sparklineOptions = {
    showMinMax: true,
    // ...
};

Additionally, you can change the color of these points using the minColor and maxColor options. These options specify the color of a bar in bar and win-loss series, or the color of a series point border in other series.

The first and last points are indicated on a sparkline by default. However, if you need to change their visibility, use the showFirstLast option.

JavaScript
var sparklineOptions = {
    showFirstLast: true,
    // ...
};

Additionally, you can change the color of these points using the firstLastColor option. Similarly to the minColor and maxColor options, this option specifies the color of a bar in bar and win-loss series, or the color of a series point border in other series.

In line- and area-like series, extreme points have several additional settings. You can choose a symbol that will represent extreme points on a sparkline. For this purpose, use the pointSymbol option. Moreover, you can specify the size and color of extreme points using the pointSize and pointColor options.

Tooltip

A tooltip is a small popup rectangle that contains information about values represented by a sparkline. The tooltip appears when a user hovers the mouse pointer over a sparkline.

DevExtreme ChartJS Sparkline

Tooltips are configured using fields of the tooltip object. By default, they are enabled. However, if your scenario requires you to change the visibility of the tooltip, use the enabled field of the tooltip object.

JavaScript
var sparklineOptions = {
    tooltip: {
        enabled: true // false
    },
    // ...
};

Although by default the tooltip displays information about extreme sparkline values, you can configure it to present any information you may find useful. To customize the contents of a tooltip, implement the customizeTooltip function. This function must return an object with the text field specified.

JavaScript
var sparklineOptions = {
    tooltip: {
        customizeTooltip: function (info) {
            return {
                text: '...' // the required text is specified here
            }
        },
        // ...
    },
    // ...
};

Furthermore, there is a number of additional options specifying the appearance of the tooltip. All of them are set in the tooltip configuration object. A structured overview of these options is given in the following list.

  • Color
    You can specify the color of the tooltip using the color option.

  • Font Settings
    To change the font of the text displayed by the tooltip, use fields of the font object.

  • Border Appearance
    You can change the visibility, color, width and other settings of the tooltip border using fields of the border configuration object.

  • Shadow
    The tooltip is displayed casting a small shadow. To specify its blurriness, opacity, color and other settings, use shadow object fields.

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the horizontalAlignment and verticalAlignment options of the tooltip object using select boxes. Hover over the sparkline to see changes in the tooltip.


                                    

                                    

In this example, you can change the horizontalAlignment and verticalAlignment options of the tooltip object using select boxes. Hover over the sparkline to see changes in the tooltip.


                                    

                                    

In this example, you can change the horizontalAlignment and verticalAlignment options of the tooltip object using select boxes. Hover over the sparkline to see changes in the tooltip.