Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Sparklines - Line Customisation

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

The following Line Sparkline Options can be used to customise Line Sparklines:

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',
    line: {
        stroke: 'rgb(124, 255, 178)',
        strokeWidth: 2
    },
    padding: {
        top: 5,
        bottom: 5
    },
    marker: {
        size: 3,
        shape: 'diamond',
    },
    highlightStyle: {
        size: 10,
    },
}

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.
    line: {
        stroke: 'orange',
        strokeWidth: 2,
    },
}

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

Line customisation
Default
Line customisation for highlighted state
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 highlightStyle options is 6px by default, allowing the markers to become visible when in the highlighted state.

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

sparklineOptions: {
    type: 'line',
    marker: {
        size: 3,
        shape: 'diamond',
        fill: 'green',
        stroke: 'green',
        strokeWidth: 2
    },
    highlightStyle: {
        size: 10,
        fill: 'cyan',
        stroke: 'cyan',
    },
}
  • 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.

Marker customisation
Default
Marker customisation
Custom marker
Marker customisation for highlighted state
Custom highlighted marker

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.
Padding customisation
Default padding
Padding customisation for highlighted state
Custom padding

Additional Customisations

More advanced customisations are discussed separately in the following sections:

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

Interfaces

LineSparklineOptions

Properties available on the LineSparklineOptions interface.

type
'line'
The type of sparklines to create, in this case it would be 'line'.
line
SparklineLine
The configuration for the line.
line: SparklineLine;

interface SparklineLine {
  // The CSS colour value for the line.
  // Default: `'rgb(124, 181, 236)'` 
  stroke?: string;
  // The thickness in pixels for the stroke of the line.
  // Default: `1` 
  strokeWidth?: number;
}
marker
SparklineMarker
The configuration for the marker styles. See SparklineMarker.
xKey
string
The key to use to retrieve X values from the data. This will only be used if the data array contains objects with key-value pairs. Default: 'x'
yKey
string
The key to use to retrieve Y values from the data. This will only be used if the data array contains objects with key-value pairs. Default: 'y'
padding
Padding
Configuration for the padding in pixels shown around the sparklines.
padding: Padding;

interface Padding {
  // The number of pixels of padding at the top of the sparkline area.
  // Default: `3` 
  top?: number;
  // The number of pixels of padding at the right of the sparkline area.
  // Default: `3` 
  right?: number;
  // The number of pixels of padding at the bottom of the sparkline area.
  // Default: `3` 
  bottom?: number;
  // The number of pixels of padding at the left of the sparkline area.
  // Default" `3` 
  left?: number;
}
axis
SparklineAxisOptions
Configuration for the x-axis. See SparklineAxisOptions.
highlightStyle
HighlightStyle
The configuration for the highlighting used when the items are hovered over.
highlightStyle: HighlightStyle;

interface HighlightStyle {
  // The width in pixels of the markers when hovered over. This is only for the Line and Area sparklines as Column sparklines do not have markers.
  // Default: `6` 
  size?: number;
  // The fill colour of the markers or columns when hovered over. Use `undefined` for no highlight fill.
  // Default: `'yellow'` 
  fill?: string;
  // The CSS colour value for the outline of the markers or columns when hovered over. Use `undefined` for no highlight stroke.
  // Default: `'silver'` 
  stroke?: string;
  // The thickness in pixels for the stroke of the markers or columns when hovered over.
  // Default: `1` 
  strokeWidth?: number;
}
tooltip
SparklineTooltip
Configuration for the tooltips.
tooltip: SparklineTooltip;

interface SparklineTooltip {
  // Set to false to disable tooltips. 
  enabled?: boolean;
  // The element to place the tooltip into. This can be used to confine the tooltip to a specific area which may be outside of the sparkline grid cell. 
  container?: HTMLElement;
  // A callback function used to create the content for the tooltips. This function should return an object or a HTML string used to render the tooltip. 
  renderer?: SparklineTooltipRenderer;
}

type SparklineTooltipRenderer = 
      (params: TooltipRendererParams) => TooltipRendererResult


interface TooltipRendererParams {
  // The grid context, includes row data, giving access to data from other columns in the same row. 
  context?: any;
  // The raw datum associated with the point. 
  datum: any;
  // The X value of the data point. 
  xValue: any;
  // The Y value of the data point. 
  yValue: any;
}

interface TooltipRendererResult {
  // Set to false to disable individual tooltip. 
  enabled?: boolean;
  // The content to display in each tooltip. 
  content?: string;
  // The title of the tooltip. 
  title?: string;
  // The CSS color for the title text. 
  color?: string;
  // The CSS color for the background of the tooltip title. 
  backgroundColor?: string;
  // The opacity of the background for the tooltip title. 
  opacity?: number;
}

SparklineMarker

enabled
boolean
By default this is set to true whilst marker size is set to 0, which means the markers are present but not visible.
Default: true
shape
string
The shape of the markers.
Default: 'circle'
Options: 'circle', 'diamond', 'square'
size
number
The width in pixels of markers. By default this is 0, increase the size to make markers visible.
Default: 0
fill
string
The CSS colour value for the fill of the markers.
Default: 'rgb(124, 181, 236)'
stroke
string
The CSS colour value for the outline of the markers.
Default: 'rgb(124, 181, 236)'
strokeWidth
number
The thickness in pixels for the stroke of the markers.
Default: 1
formatter
Function
A callback function to return format styles for individual markers.
formatter = (
    params: FormatterParams
) => MarkerFormat;

interface FormatterParams {
  datum: any;
  xValue: any;
  yValue: number;
  highlighted: boolean;
  min?: boolean;
  max?: boolean;
  first?: boolean;
  last?: boolean;
  fill?: string;
  stroke?: string;
  strokeWidth: number;
  size: number;
}

interface MarkerFormat {
  // Set to false to make marker invisible. 
  enabled?: boolean;
  // The width in pixels of the individual marker. 
  size?: number;
  // The CSS colour value for the fill of the individual marker. 
  fill?: string;
  // The CSS colour value for the outline of the individual marker. 
  stroke?: string;
  // The thickness in pixels for the stroke of the individual marker. 
  strokeWidth?: number;
}

SparklineAxisOptions

type
string
The type of the x-axis.
Default: 'category'
Options: 'category', 'number', 'time'

Next Up

Continue to the next section to learn about: Column Sparkline Customisation.