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