React Data GridSparklines - Line Customisation

This section shows how Line Sparklines can be customised by overriding the default line options.

The following can be used to customise Line Sparklines:

• Line Options
• Marker Options
• Sparkline Padding Options

Also see Additional Customisations for more advanced customisations that are common across all sparklines.

The snippet below shows option overrides for the Line Sparkline:

sparklineOptions: {
    type: 'line',
    stroke: 'rgb(124, 255, 178)',
    strokeWidth: 2,
    padding: {
        top: 5,
        bottom: 5,
    },
    marker: {
        itemStyler: (params) => {
            if(params.highlighted) {
                return {
                    size: 7;
                }
            }
        }
    },
    highlightStyle: {
        item: {
            fill: 'rgb(124, 255, 178)',
            strokeWidth: 0
        }
    },
}

The following example demonstrates the results of the Line Sparkline options above:

Line Options

To apply custom stroke and strokeWidth attributes to the line, set these properties under line options as shown:

sparklineOptions: {
    type: 'line',
    // Customise the line path in the sparkline.
    stroke: 'orange',
    strokeWidth: 2,
}

The result of the above configuration is displayed below on the right, compared with default line options on the left.

Default

Custom line

Marker Options

The markers are enabled by default but the size has been set to 0px, making them invisible.

The size property in the marker.itemStyler is 10px, allowing the markers to become visible when in the highlighted state.

These formats can be modified to your liking by setting the marker.itemStyler and highlightStyle options as demonstated below.

sparklineOptions: {
    type: 'line',
    marker: {
        enabled: true,
        size: 3,
        shape: 'diamond',
        fill: 'green',
        stroke: 'green',
        strokeWidth: 2,
        itemStyler: (params) => {
            if(params.highlighted) {
                return {
                    size: 10;
                }
            }
        }
    }
}

• In the snippet above, we have configured the marker size to be 3px in the un-highlighted normal state, and 10px in the highlighted state.
• Note that the fill and stroke are also different depending on the highlighted state of the marker.

The result of the above configuration is displayed below, compared with default marker options in the first sparkline.

Default

Custom marker

Custom highlighted marker

See AG Charts Series Markers for more information on marker options. See AG Charts Stylers for more information on item stylers.

Sparkline Padding Options

To add extra space around the sparklines, custom padding options can be applied in the following way.

sparklineOptions: {
    type: 'line',
    // Adjust the padding around the sparklines.
    padding: {
        top: 10,
        right: 5,
        bottom: 10,
        left: 5
    },
}

• The top, right, bottom and left properties are all optional and can be modified independently.

Default padding

Custom padding

Additional Customisations

More advanced customisations are discussed separately in the following sections:

• Axis - configure the axis type via axis options.
• Tooltips - configure tooltips using tooltip options.
• Points of Interest - configure individual points of interest using an itemStyler.

Next Up

Continue to the next section to learn about: Sparkline Data.