To apply custom stroke and strokeWidth attributes to the line, set these properties under line options as shown:
sparklineOptions:{
type:'area',// Customise the line path in the area sparkline.
line:{
stroke:'orange',
strokeWidth:2},}
The result of the above configuration is displayed here.
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 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 demonstrated below.
sparklineOptions:{
type:'area',
marker:{
size:3,// Optional - marker shape is 'circle' by default.
shape:'circle',
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.
Here is the result of the configuration shown in the above snippet.
Default
Custom marker
Custom highlighted marker
Area Fill Options
To change the color of the area between the data points and the axis line, add the fill property to sparklineOptions as shown in the code snippet below.
sparklineOptions:{
type:'area',
fill:'lavender',// sets the colour between the area line and axis}
Here is the result of the configuration shown in the above snippet:
Default
Custom fill
The given fill string can be in one of the following formats:
#rgb - Short Hex Code
#rrggbb - Hex Code
rgb(r, g, b) - RGB
rgba(r, g, b, a) - RGB with an alpha channel
CSS color keyword - such as aqua, orange, etc.
Axis Line Options
By default, an axis line is displayed. This setting can be modified using the axis options.
See the code snippet below showing how to customise the axis line color and thickness.
sparklineOptions:{
type:'area',
axis:{
stroke:'coral',// sets the axis line stroke
strokeWidth:3,// sets the axis line strokeWidth}}
Here is the result of the configuration shown in the above snippet:
Default axis line
Custom axis line
It is possible to remove the axis line entirely by setting the axis strokeWidth to 0.
Crosshairs Options
Crosshairs display a vertical and horizontal line running across the sparklines when hovering on a data point. When the mouse is moved, the crosshairs will snap to the closest data point.
By default, the vertical crosshair line has been enabled for area sparklines and is displayed as a solid grey line.
The horizontal and vertical crosshair lines can be enabled or disabled independently by adding crosshairs options as shown below:
sparklineOptions:{
crosshairs:{
xLine:{
enabled:false// enabled by default, set to false to remove the default vertical crosshair line},
yLine:{
enabled:false// disabled by default, set to true to enable the horizontal crosshair line}}}
The style of the crosshair line, including stroke, strokeWidth, lineDash and lineCap, can be customised via the xLine and yLine options:
Below is an example to show crosshair customisation. Note that:
The sparklines in the Change column have been configured so that both the vertical and horizontal crosshairs (xLine and yLine) are displayed as a dashed grey line.
The sparklines in the Rate Of Change column have been configured so that no crosshairs are displayed when the sparklines are hovered.
Tooltips - configure tooltips using tooltip options.
Points of Interest - configure individual points of interest using a formatter.
Interfaces
AreaSparklineOptions
Properties available on the AreaSparklineOptions interface.
type
'area'
The type of sparklines to create, in this case it would be 'area'.
fill
string
The CSS colour value for the fill of the area. Default: 'rgba(124, 181, 236, 0.25)'
line
SparklineLineOptions
The configuration for the line.
line: SparklineLineOptions;
interface SparklineLineOptions {
// 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: SparklineMarkerOptions;
interface SparklineMarkerOptions {
// 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`
enabled?: boolean;
// The shape of the markers.
// Default: `'circle'`
shape?: string;
// The width in pixels of markers. By default this is `0`, increase the size to make markers visible.
// Default: `0`
size?: number;
// The CSS colour value for the fill of the markers.
// Default: `'rgb(124, 181, 236)'`
fill?: string;
// The CSS colour value for the outline of the markers.
// Default: `'rgb(124, 181, 236)'`
stroke?: string;
// The thickness in pixels for the stroke of the markers.
// Default: `1`
strokeWidth?: number;
// A callback function to return format styles for individual markers.
formatter?: SparklineMarkerFormatter;
}
type SparklineMarkerFormatter =
(params: MarkerFormatterParams) => MarkerFormat
interface MarkerFormatterParams {
// The raw data associated with the specific marker.
datum: any;
// The X value of the data point.
xValue: any;
// The Y value of the data point.
yValue: any;
// Whether or not the marker is a minimum point.
min?: boolean;
// Whether or not the marker is a maximum point.
max?: boolean;
// Whether or not the marker represents the first data point.
first?: boolean;
// Whether or not the marker represents the last data point.
last?: boolean;
// 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;
// The width in pixels of the individual marker.
size: number;
// Whether or not the marker is highlighted.
highlighted: boolean;
}
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;
}
crosshairs
SparklineCrosshairsOptions
The configuration for the crosshairs.
crosshairs: SparklineCrosshairsOptions;
interface SparklineCrosshairsOptions {
xLine?: CrosshairLineOptions;
yLine?: CrosshairLineOptions;
}
interface CrosshairLineOptions {
// Set to true to show crosshair line.
// Default: false
enabled?: boolean;
// The CSS colour value for the crosshair line.
// Default: `rgba(0,0,0, 0.54)`
stroke?: string;
// The thickness in pixels for the crosshair line.
// Default: 1
strokeWidth?: number;
// Defines how the crosshair stroke is rendered. This can be one of the lineDash style options.
// The default is `solid`, this renders a solid stroke with no gaps.
lineDash?: 'dash' | 'dashDot' | 'dashDotDot' | 'dot' | 'longDash' | 'longDashDot' | 'longDashDotDot' | 'shortDash' | 'shortDashDot' | 'shortDashDotDot' | 'shortDot' | 'solid';
// The shape used to draw the end points of the crosshair line.
// The options include `butt` (the ends of the line are squared off at the endpoints), `round` (the ends of the line are rounded) and `square` (the ends of the line are squared off by adding a box with width equal to the line's strokeWidth and height equal to half the line's strokeWidth).
// Default: `butt`
lineCap?: 'round' | 'square' | 'butt';
}
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
PaddingOptions
Configuration for the padding in pixels shown around the sparklines.
padding: PaddingOptions;
interface PaddingOptions {
// 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;
interface SparklineAxisOptions {
// The type of axis used to plot the data.
// Default: `'category'`
type?: AxisType;
// The CSS colour value for the outline of the axis line.
// Default: `'rgb(204, 214, 235)'`
stroke?: string;
// The thickness in pixels for the stroke of the axis line.
// Default: `1`
strokeWidth?: number;
}
type AxisType =
'number'
| 'category'
| 'time'
highlightStyle
HighlightStyleOptions
The configuration for the highlighting used when the items are hovered over.
highlightStyle: HighlightStyleOptions;
interface HighlightStyleOptions {
// The width in pixels of the markers when hovered over. This is only for the Line and Area sparklines as Column and Bar sparklines do not have markers.
// Default: `6`
size?: number;
// The fill colour of the markers, columns or bars when hovered over. Use `undefined` for no highlight fill.
// Default: `'yellow'`
fill?: string;
// The CSS colour value for the outline of the markers, columns or bars when hovered over. Use `undefined` for no highlight stroke.
// Default: `'silver'`
stroke?: string;
// The thickness in pixels for the stroke of the markers, columns or bars when hovered over.
// Default: `1`
strokeWidth?: number;
}
tooltip
SparklineTooltipOptions
Configuration for the tooltips.
tooltip: SparklineTooltipOptions;
interface SparklineTooltipOptions {
// 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;
// The horizontal distance in pixels between the cursor and the top left corner of the tooltip.
// Default: `10`
xOffset?: number;
// The vertical distance in pixels between the cursor and the top left corner of the tooltip.
// Default: `0`
yOffset?: number;
// 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;
}
SparklineMarkerOptions
Properties available on the SparklineMarkerOptions interface.
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
SparklineMarkerFormatter
A callback function to return format styles for individual markers.
formatter: SparklineMarkerFormatter;
type SparklineMarkerFormatter =
(params: MarkerFormatterParams) => MarkerFormat
interface MarkerFormatterParams {
// The raw data associated with the specific marker.
datum: any;
// The X value of the data point.
xValue: any;
// The Y value of the data point.
yValue: any;
// Whether or not the marker is a minimum point.
min?: boolean;
// Whether or not the marker is a maximum point.
max?: boolean;
// Whether or not the marker represents the first data point.
first?: boolean;
// Whether or not the marker represents the last data point.
last?: boolean;
// 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;
// The width in pixels of the individual marker.
size: number;
// Whether or not the marker is highlighted.
highlighted: boolean;
}
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
Properties available on the SparklineAxisOptions interface.
type
AxisType
The type of axis used to plot the data. Default: 'category'
type: AxisType;
type AxisType =
'number'
| 'category'
| 'time'
stroke
string
The CSS colour value for the outline of the axis line. Default: 'rgb(204, 214, 235)'
strokeWidth
number
The thickness in pixels for the stroke of the axis line. Default: 1
