Chart Annotation Sample

chart.ts

import 'chartjs-plugin-annotation';

static chartOptions() {
		const options: any = {
			responsive: true,
			title: {
				display: true,
				text: ''
			},
			scales: {
				yAxes: [{
					type: 'linear',
					scaleLabel: {
						display: true,
						labelString: '',
					}
				}],
				xAxes: [{
					scaleLabel: {
						display: true,
						labelString: 'Past Seven Days of Update'
					}
				}]
			},
			annotation: {
				annotations: [{
					// Horizontal Line
					type: 'line',
					mode: 'horizontal',
					scaleID: 'y-axis-0',
					value: 3,
					borderColor: 'rgb(40, 167, 69)',
					borderWidth: 2,
					label: {
						enabled: true,
						content: 'Y Label'
					}
				},
				{
					// Vertical Line
					type: 'line',
					mode: 'vertical',
					scaleID: 'x-axis-0',
					value: 7,
					borderColor: 'rgb(58, 167, 69)',
					borderWidth: 2,
					label: {
						enabled: true,
						content: 'X Label'
					}
				}
				]
			}
		};

		return options;
	}