Sparkline

The Ignite UI for React sparkline component is a lightweight charting control. It is intended for rendering within a small scale layout such as within a grid cell, but can also be rendered alone.

The sparkline control has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips.

Demo

Dependencies

In order to use the Ignite UI for React sparkline component, the following packages need to be installed:

  • npm install --save igniteui-react-core
  • npm install --save igniteui-react-charts

The sparkline component requires the import of the following modules:

import { IgrSparklineModule } from "igniteui-react-charts/ES5/igr-sparkline-module";
import { IgrSparklineCoreModule } from "igniteui-react-charts/ES5/igr-sparkline-core-module";
import { SparklineDisplayType } from 'igniteui-react-charts/ES5/SparklineDisplayType';

IgrSparklineCoreModule.register();
IgrSparklineModule.register();

Sparkline Types

The Ignite UI for React sparkline component supports the following types of sparklines:

The type is defined by setting the displayType property. If the displayType property is not specified, then by default, the Line type is displayed.

The WinLoss sparkline type is a column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative values) of the bound data set, often denoting a Win or a Loss, or similar opposing concepts. For the WinLoss sparkline to display properly, the data set should have both positive and negative values.

If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the sparkline component will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values.

<IgrSparkline height="200px" width="400px"
    dataSource={this.data}
    valueMemberPath="Value"
    displayType="Area" />

Markers

The Ignite UI for React sparkline component allows you to show markers as circular colored icons on your series to indicate the individual data points based on X/Y coordinates. Markers can be set on sparklines of display types Line, Area, and Column. The WinLoss type of sparkline does not currently accept markers. By default, markers are not displayed.

Markers in the sparkline can be placed in any combination of the following locations:

  • All: Display markers for all data points in the sparkline.
  • Low: Display markers on the data point of the lowest value. If there are multiple points at the lowest value, it will show on each point with that value.
  • High: Display markers on the data point of the highest value. If there are multiple points at the highest value, it will show on each point with that value.
  • First: Display a marker on the first data point in the sparkline.
  • Last: Display a marker on the last data point in the sparkline.
  • Negative: Display markers on the negative data points plotted in the sparkline.

All of the markers mentioned above can be customized using the related marker types' property in aspects of color, visibility, and size. For example, the Low markers above will have properties lowMarkerBrush, lowMarkerVisibility, and lowMarkerSize.

<IgrSparkline
    highMarkerVisibility="Visible"
    lowMarkerVisibility="Visible"
    firstMarkerVisibility="Visible"
    lastMarkerVisibility="Visible"
    negativeMarkerVisibility="Visible"
    markerVisibility="Collapsed"
    markerSize={10}
    firstMarkerSize={10}
    lastMarkerSize={10}
    lowMarkerSize={10}
    highMarkerSize={10}
    negativeMarkerSize={10}/>

Normal Range

The normal range feature of the Ignite UI for React sparkline component is a horizontal stripe representing some pre-defined meaningful range when the data is being visualized. The normal range can be set as a shaded area outlined with the desired color.

The normal range can be wider than the maximum data point or beyond, and it can also be as thin as the sparkline's Line display type, to serve as a threshold indicator, for instance. The width of the normal range is determined by the following three properties, which serve as the minimum settings required for displaying the normal range:

By default, the normal range is not displayed. When enabled, the normal range shows up with a light gray color appearance, which can also be configured using the normalRangeFill property.

You can also configure whether or not to show the normal range in front of or behind the plotted series in your sparkline component by setting the displayNormalRangeInFront property.

<IgrSparkline
    normalRangeVisibility="Visible"
    normalRangeMinimum={1}
    normalRangeMaximum={4}
    normalRangeFill="rgba(255, 0, 0, 0.4)"
    displayNormalRangeInFront="true"  />

Trendlines

The Ignite UI for React sparkline component has support for a range of trendlines that display as another layer on top of the actual sparkline layer. To display a sparkline, you can use the trendLineType property.

The trendlines are calculated according to the algorithm specified by the trendLineType property using the values of the data the the chart is bound to.

Trendlines can only be displayed one at a time and by default, the trendline is not displayed.

A list of supported trendlines can be found below:

The following code example shows how to enable a trendline in the Ignite UI for React sparkline component:

<IgrSparkline
    trendLineThickness={3}
    trendLinePeriod={5}
    trendLineType="ExponentialFit"
    trendLineBrush="Red"  />

Unknown Value Interpolation

The Ignite UI for React sparkline component can detect unknown values and render the space for unknown values through a specified interpolation algorithm. If your data contains null values and you do not use this feature, meaning no interpolation is specified, the unknown value will not be plotted.

In order to plot the unknown values, you can set the unknownValuePlotting property of the sparkline component.

<IgrSparkline
    unknownValuePlotting="LinearInterpolate" />

Sparkline in Data Grid

You can embed the Ignite UI for React sparkline component in a template column of data grid or other components that support templates. The following code example shows how to do this:

<IgrLiveGrid
    height="100%"
    width="100%"
    rowHeight="70"
    autoGenerateColumns="false"
    dataSource={this.data}>
    {/* ... */}
    <IgrTemplateColumn propertyPath="OrderHistory"
    headerText="Order History"
    horizontalAlignment="center" width="*>120"
    template={this.getOrderHistoryTemplate} />
    {/* ... */}
</IgrLiveGrid>
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";
import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-grids/ES5/igr-template-column';
// ...
public getOrderHistoryTemplate(props: IIgrCellTemplateProps) {
    const info = props.dataContext as TemplateCellInfo;
    return (
        <div className="sparklineInGrid">
           <IgrSparkline
               height="60px" width="100%"
               displayType="Line"
               dataSource={info.rowItem.OrderHistory}
               valueMemberPath="Sold"
               labelMemberPath="Week"
               lineThickness={2}
               brush="rgb(21, 190, 6)"
               negativeBrush="rgb(211, 17, 3)" />
        </div>
    );
}