var colorpalette = ["red", "blue", "green", "magenta", "yellow", "brown", "purple", "orange", "black", "gray"];
var currseriesnum = 0;
var chart = null;

function setUpChart() {

    var ctx = document.getElementById('chartArea').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: monthnames,
            datasets: [] // Initially blank - series added dynamically with chart.update()
        },
        options: {
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            plugins: {  // ChartsJS DataLabels initialized here
                datalabels: {
                    anchor: 'end',
                    align: 'bottom',
                    formatter: Math.round,
                    font: {
                      weight: 'bold',
                      size: 16
                    },
                    color: colorpalette[currseriesnum] // Pick color dynamically
                }
            }
        }
    });

}

chart.data.datasets.push({
    label: keyValueSelection.label,
    fill: false,
    data: keyValueSelection.value,
    borderColor: colorpalette[currseriesnum],
    borderWidth: 2
});
chart.update();
currseriesnum++;