# Selection
Click events are handled to select labels, returning true
to re-render
the chart and update labels (see the Output
tab).
{ type: 'line', data: { labels: labels, datasets: [{ backgroundColor: Utils.color(0), borderColor: Utils.color(0), data: Utils.numbers({ count: DATA_COUNT, decimals: 0, min: 0, max: 100 }), datalabels: { align: 'start' } }, { backgroundColor: Utils.color(1), borderColor: Utils.color(1), data: Utils.numbers({ count: DATA_COUNT, decimals: 0, min: 0, max: 100 }) }, { backgroundColor: Utils.color(2), borderColor: Utils.color(2), data: Utils.numbers({ count: DATA_COUNT, decimals: 0, min: 0, max: 100 }), datalabels: { align: 'end' } }] }, options: { plugins: { datalabels: { backgroundColor: function(context) { return isSelected(context) ? context.dataset.backgroundColor : 'white'; }, borderColor: function(context) { return context.dataset.backgroundColor; }, borderWidth: 2, color: function(context) { return isSelected(context) ? 'white' : context.dataset.backgroundColor; }, font: { weight: 'bold' }, offset: 8, padding: 6, listeners: { click: function(context) { if (isSelected(context)) { deselect(context); } else { select(context); } return true; } } } }, // Core options aspectRatio: 5 / 3, layout: { padding: { top: 42, right: 16, bottom: 32, left: 8 } }, elements: { line: { fill: false, tension: 0.4 } }, scales: { y: { stacked: true } } } }