ChartJS separate charts per JSON object, and not when hovered over

Question

I am very new to ChartJS and JavaScript, but I am trying to build some charts for my django app. I am having an issue when trying to build multiple charts from different JSON objects in the same string. Right now, the same chart is built, and when hovered over, it switches over to the second view. I want one chart with the first view, or first JSON object, and the second chart with the second view/second JSON object. See below for my code and some sample data:

data = [{'title': 'team', 'labels': ['Team score'], 'default': [50.0], 'title': 'single': 'labels': ['Single score'], 'default': [37.5]}]

JS:
var defaultData = [];
var labels = [];


function loadDashboard() {
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function(data) {
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var objName = Object.keys(data)[0];
                    var val = data[key];
                    labels = val.labels;
                    defaultData = val.default;
                    updateChart(label=labels, data=defaultData, elementId=objName)
                }
            }
        },
        error: function(error_data) {
            console.log("error");
            console.log(error_data)
        }
    });
}

function updateChart(label, data, elementId) {
    var tableName = document.getElementById(elementId).getContext('2d');
    var elementId = new Chart(tableName, {
        type: 'bar',
        data: {
            labels: label,
            datasets: [{
                label: 'NPS Score',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
}

$(document).ready(function() {
    loadDashboard()
});

HTML

    <div class="row">
        <div class="col-sm-6" id="teamScore" url-endpoint="{% url 'nps-dashboard-data' %}">
            <canvas id="teamScoreChart" width="400" height="400"></canvas>
        </div>
        <div class="col-sm-6" id="singleScore">
            <canvas id="singeScoreChart" width="400" height="400"></canvas>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
        <script src="{% static 'js/dashboard.js' %}"></script>
    </div>

Answer 1

Ended up figuring it out, for those interested:

var defaultData = [];
var labels = [];


function loadDashboard() {
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function (data) {
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    console.log(data[key])
                    var val = data[key];
                    var objName = val['title']
                    labels = val.labels;
                    defaultData = val.default;
                    updateChart(labels, defaultData, objName)
                }
            }
        },
        error: function (error_data) {
            console.log("error");
            console.log(error_data)
        }
    });
}


function updateChart(label, data, elementId) {
    var newTable = document.getElementById(elementId).getContext('2d');
    var newElement = new Chart(newTable, {
        type: 'bar',
        data: {
            labels: label,
            datasets: [{
                label: 'Score',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
}


$(document).ready(function() {
    loadDashboard()
});