This section shows how Area Sparklines can be customised by overriding the default area options.
The following Area Sparkline Options can be used to customise Area Sparklines:
- Area Line Options
- Marker Options
- Area Fill Options
- Axis Line Options
- Crosshairs 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 Area Sparkline:
sparklineOptions: {
type: 'area',
fill: 'rgba(216, 204, 235, 0.3)',
line: {
stroke: 'rgb(119,77,185)',
},
highlightStyle: {
fill: 'rgb(143,185,77)',
},
axis: {
stroke: 'rgb(204, 204, 235)',
}
}
The following example demonstrates the results of the Area Sparkline options above:
Area Line Options
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.
Marker Options
The markers are enabled by default but the size has been set to 0
px, making them invisible.
The size
property in the highlightStyle
options is 6
px 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
3
px in the un-highlighted normal state, and10
px 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.
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:
The given fill
string can be in one of the following formats:
#rgb
- Short Hex Code#rrggbb
- Hex Codergb(r, g, b)
- RGBrgba(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:
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:
sparklineOptions: {
crosshairs: {
xLine: {
enabled: true, // enabled by default
lineDash: 'dash',
stroke: '#999',
},
yLine: {
enabled: true,
lineDash: 'dash',
stroke: '#999',
},
}
}
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.
Sparkline Padding Options
To add extra space around the sparklines, custom padding
options can be applied as shown in the code snippet below.
sparklineOptions: {
type: 'area',
// sets the padding around the sparkline
padding: {
top: 10,
right: 5,
bottom: 10,
left: 5
},
}
Note that the top
, right
, bottom
and left
properties are all optional and can be modified independently.
Here is the result of the configuration shown in the above snippet:
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 a
formatter
.
Interfaces
AreaSparklineOptions
Properties available on the AreaSparklineOptions
interface.
The type of sparklines to create, in this case it would be 'area' . |
The CSS colour value for the fill of the area. |
The configuration for the line. |
The configuration for the marker styles. |
The configuration for the crosshairs. |
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. |
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. |
Configuration for the padding in pixels shown around the sparklines. |
The options for the axis line in the sparklines. |
The configuration for the highlighting used when the items are hovered over. |
Configuration for the tooltips. |
SparklineMarkerOptions
Properties available on the SparklineMarkerOptions
interface.
By default this is set to true whilst marker size is set to 0 , which means the markers are present but not visible. |
The shape of the markers. Options: 'circle' , 'diamond' , 'square' |
The width in pixels of markers. By default this is 0 , increase the size to make markers visible. |
The CSS colour value for the fill of the markers. |
The CSS colour value for the outline of the markers. |
The thickness in pixels for the stroke of the markers. |
A callback function to return format styles for individual markers. |
SparklineAxisOptions
Properties available on the SparklineAxisOptions
interface.
The type of axis used to plot the data. |
The CSS colour value for the outline of the axis line. |
The thickness in pixels for the stroke of the axis line. |
Next Up
Continue to the next section to learn about: Bar Customisation.