charts/docs/basic/annotations.md

Annotations

Special values (like range points) on a chart can be annotated for quick comparisions. As they are among the components of a graph that can be updated, they are defined within the data property itself. There are two kinds of annotations that can be used to mark the vertical axis values: markers and regions.

Markers

To highlight certain values on the Y axis, yMarkers can be set. They will shown as dashed lines on the graph.

data = {
	// labels: [],
	// datasets: [],
	yMarkers: [
		{
			label: "Threshold",
			value: 650,
			options: { labelPos: 'left' } // default: 'right'
		}
	]
}

Regions

2D counterparts to markers, they have a start and end instead of value:

yRegions: [
	{
		label: "Optimum Value",
		start: 100,
		end: 600,
		options: { labelPos: 'right' }
	}
],

Shown as a greyed-out area between the extremes.

Tooltips

Frappe Charts are known for their awesome tooltips. What’s more, they are also customizable for the format of the label and value displayed on them.

tooltipOptions: {
	formatTooltipX: d => (d + '').toUpperCase(),
	formatTooltipY: d => d + ' pts',
}

For a non-web or static interface, where tooltips are absent, valuesOverPoints is a useful tweak to show value information at a glance.

{
	valuesOverPoints: 1 // default: 0
}

Next up we’ll look at perhaps one the more exciting parts in axis charts: Mixed Charts.