This section covers customisation of Sparkline Points of Interest.
Some data points in the sparklines are special and can be emphasised to allow for quick identification and comparisons across the values of a single sparkline or across multiple sparklines of the same type. These include:
These special points can be customised via the formatter
callback function to make them stand out from the rest of the data points which are using the global styles.
Below are some examples demonstrating the different formatters for the three sparkline types:
In the line and area sparklines, each data point is represented by a marker. To customise the points of interest, the formatter
function is added to the marker
options:
sparklineOptions: {
marker: {
formatter: markerFormatter, // add formatter to marker options
},
}
The formatter
callback function will receive an input parameter of type markerFormatterParams
.
The function return type should be MarkerFormat
, allowing the following attributes to be customised:
The following sections outline how the attributes mentioned above can be customised for various special points of interest:
Let's say we have a line sparkline where the markers are all 'skyblue'
but we want to make the first and last markers stand out with a purple fill
and stroke
style.
We can do this by adding the following formatter to the marker
options.
const markerFormatter = (params) => {
const { first, last } = params;
return {
size: first || last ? 5 : 3,
fill: first || last ? '#9a60b4' : 'skyblue',
stroke: first || last ? '#9a60b4' : 'skyblue'
}
}
first
and last
boolean values are extracted from the params object and used to conditionally set the size
, fill
and stroke
of the markers.first
or last
is true
, the size
of the marker is set to 5
px. All other markers will be 3
px.See the result of adding this formatter in the sparklines on the right below, compared with the ones on the left which are using global styles in marker
options:
Similar to first and last, to emphasise the min and max data points, the min
and max
booleans from the formatter params can be used to conditionally style the markers.
const markerFormatter = (params) => {
const { min, max } = params;
return {
size: min || max ? 5 : 3,
fill: min ? '#ee6666' : max ? '#3ba272' : 'skyBlue',
stroke: min ? '#ee6666' : max ? '#3ba272' : 'skyBlue',
}
}
min
or max
is true
– the size is set to 5
px, otherwise it is set to3
px.fill
and stroke
are set to red, if the marker represents a maximum point, the fill
and stroke
are set to green. Otherwise the fill and stroke are set to sky blue.See the result of adding this formatter in the sparklines on the right below, compared with the ones on the left which are using global styles in marker
options:
The positive and negative values can be distinguished by adding a formatter
which returns styles based on the yValue
of the data point.
This is demonstrated in the snippet below.
const markerFormatter = (params) => {
const { yValue } = params;
return {
// if yValue is negative, the marker should be 'red', otherwise it should be 'green'
fill: yValue < 0 ? 'red' : 'green',
stroke: yValue < 0 ? 'red' : 'green'
}
}
See the result of adding this formatter in the sparklines on the right below, compared with the ones on the left which are using global styles in marker
options:
Bar sparklines are just transposed column sparklines and have the same configuration. This section only covers column sparkline examples but the same applies for bar sparklines.
In the column sparklines, each data point is represented by a rectangle/ column. The formatter
callback function applies to the individual columns and is added to sparklineOptions
:
sparklineOptions: {
type: 'column',
formatter: columnFormatter, // add formatter to sparklineOptions
}
The formatter
will receive an input parameter with values associated with the data point it represents. The input parameter type is columnFormatterParams
.
The function return type should be ColumnFormat
, allowing these attributes to be customised:
The following sections outline how the attributes mentioned above can be customised for various special points of interest:
Let's say we want to make the first and last columns in our column sparklines stand out by styling them differently to the rest of the columns.
We can do this by adding the following formatter to the sparklineOptions
.
const columnFormatter = (params) => {
const { first, last } = params;
return {
fill: first || last ? '#ea7ccc' : 'skyblue',
stroke: first || last ? '#ea7ccc' : 'skyblue'
}
}
Here is the result of adding this formatter compared with setting global styles in sparklineOptions
:
Similar to first and last, to emphasise the min and max data points, the min
and max
booleans from the formatter params can be used to conditionally style the markers.
const columnFormatter = (params) => {
const { min, max } = params;
return {
fill: min ? '#ee6666' : max ? '#3ba272' : 'skyBlue',
stroke: min ? '#ee6666' : max ? '#3ba272' : 'skyBlue',
}
}
Here is the result of adding this formatter compared with setting global styles in sparklineOptions
:
The positive and negative values can be distinguished by adding a formatter which returns styles based on the yValue
of the data point.
This is demonstrated in the snippet below.
const columnFormatter = (params) => {
const { yValue } = params;
return {
// if yValue is negative, the column should be dark red, otherwise it should be purple
fill: yValue < 0 ? '#a90000' : '#5470c6',
stroke: yValue < 0 ? '#a90000' : '#5470c6'
}
}
Here is the result of adding this formatter compared with setting global styles in sparklineOptions
:
The example below shows formatting of special points for line, area and column sparklines.
It should be noted that
highlighted
property on the params
object is used to distinguish between highlighted and un-highlighted states.formatter
for line and area sparklines is added to the marker
optionssize
property is returned from the area and line formatters to make certain special markers visible and the rest invisible.All formatters will receive the highlighted property in the input. If the current data point is highlighted, the highlighted property will be set to true; make sure to check this if you want to differentiate between the highlighted and un-highlighted states when customising the special points.
Properties available on the MarkerFormatterParams
interface.
Properties available on the MarkerFormat
interface.
Properties available on the ColumnFormatterParams
interface.