Data Labels Plugin

	var DATA_COUNT = 10;
	var labels = [];

	for (var i = 0; i < DATA_COUNT; ++i) {
		labels.push('' + i);
	}

	var dt = [];
	var dt1 = [];
	var dt2 = [];
	for (i = 0; i < DATA_COUNT; ++i) {
		dt.push(Math.ceil((Math.random() * 100)));
		dt1.push(Math.ceil((Math.random() * 100)));
		dt2.push(Math.ceil((Math.random() * 100)));
	}

	var data = {
		type: 'line',
		data: {
			labels: labels,
			datasets: [{
				backgroundColor: 'teal',
				borderColor: 'teal',
				data: dt,
				datalabels: {
					align: 'start',
					anchor: 'start'
				}
			}, {
				backgroundColor: 'blue',
				borderColor: 'blue',
				data: dt1
			}, {
				backgroundColor: 'purple',
				borderColor: 'purple',
				data: dt2,
				datalabels: {
					align: 'end',
					anchor: 'end'
				}
			}]
		}
	}

	var options = {
		plugins: {
			legend: {
				display: false
			},
			title: {
				display: true,
				text: 'Data Labels'
			},
			tooltip: {
				enabled: false
			},
			datalabels: {
				backgroundColor: clientutils.generateBrowserFunction("function(context) { return '' + context.dataset.backgroundColor }"),
				borderRadius: 4,
				color: 'white',
				font: {
					weight: 'bold'
				},
				formatter: clientutils.generateBrowserFunction("function(value) { return '' + Math.round(value) }"),
				padding: 6
			}
		},
		
		aspectRatio: 5 / 3,
		layout: {
			padding: {
				top: 32,
				right: 16,
				bottom: 16,
				left: 8
			}
		},
		elements: {
			line: {
				fill: false
			}
		},
		scales: {
			y: {
				stacked: true
			}
		}
	}

	elements.chart.setData(data);
	elements.chart.setOptions(options);

*Note that this plugin will not work when used along side outlabels plugin (Use one or the other)

*Listeners not yet supported fully in current release.

Last updated