onClick: function (e) {
                var element = this.getElementAtEvent(e);
                var activePoints = myChart.getElementsAtEventForMode(e, 'point', myChart.options);
                var firstPoint = activePoints[0];
                var label = myChart.data.labels[firstPoint._index];

                if (label.substr(0,3) == "Fil") $("#myChart").css("background","url(images/highlight1.png)");
                else if (label.substr(0,3) == "Lan") $("#myChart").css("background","url(images/highlight2.png)");
                else if (label.substr(0,3) == "Por") $("#myChart").css("background","url(images/highlight3.png)");
                else if (label.substr(0,3) == "Spo") $("#myChart").css("background","url(images/highlight4.png)");
                else if (label.substr(0,3) == "Str") $("#myChart").css("background","url(images/highlight5.png)");

                var cameraname = $('.camera-id').text();
                //$('#myChart').fadeOut();
                $('#feature-recommendation-modes').fadeOut();
                //$('#graph-intro').fadeOut();
                $('#mode-to-camera-comparison-detail').html("<button class='btn btn-primary mr-4' onclick='goBackToChart();'><i class='fa fa-chevron-left' aria-hidden='true'></i><span class='ml-3'>Close</span></button>");
                $('#mode-to-camera-comparison-detail').append(label + " for camera <span style='color:blue'>" + cameraname + "</span>");
                $.get("getCameraFeaturesModeComparison.php", {
                    camera: cameraname,
                    mode: label.replace(' ', '_')
                })

                .done(function (data) {
                    var parsedData = JSON.parse(data);
                    var k = 0;
                    var availability;
                    var table = "<table class='table table-striped table-hover text-center mt-2'><thead class='p-1'><tr><th scope='col'>Feature</th><th scope='col'>" + label + "</th><th scope='col'>" + cameraname + "</th><th>Availability</th></thead>";
                    table += "<tbody>";
                    $.each(parsedData, function (i, item) {
                        if (i == 'video_highest_resolution') {
                            if (item['camera'] == '1920 x 1080 pixel' || item['camera'] == '3840 x 2160 pixel' || item['camera'] == '4096 x 2160 pixel') {
                                availability = '<i class="fa fa-check" aria-hidden="true" style="color: green"></i>';
                            } else {
                                availability = '<i class="fa fa-times" aria-hidden="true" style="color: red"></i>';
                            }
                            table += "<tr><th scope='row' class='hint--medium hint--bottom' aria-label='"+item['explanation']+"'>"+ i.replace(/_/g, " ").toUpperCase() + "   &#9432;</th><td>" + item['mode_min']+ " - " + item['mode_max'] + "</td><td>" + item['camera'] + "</td><td>" + availability + "</td></tr>";

                        }
                        else if (typeof(item['mode_min']) == 'undefined') {
                            if (item['mode'] == item['camera']) {
                                availability = '<i class="fa fa-check" aria-hidden="true" style="color: green"></i>';
                            } else {
                                availability = '<i class="fa fa-times" aria-hidden="true" style="color: red"></i>';
                            }
                            table += "<tr><th scope='row' class='hint--medium hint--bottom' aria-label='"+item['explanation']+"'>"+ i.replace(/_/g, " ").toUpperCase() + "  &#9432;</th><td>" + item['mode'] + "</td><td>" + item['camera'] + "</td><td>" + availability + "</td></tr>";
                        }
                    else {
                            if ((parseFloat(item['mode_min']) < parseFloat(item['camera']) && parseFloat(item['mode_max']) < parseFloat(item['camera'])) || (parseFloat(item['mode_min']) > parseFloat(item['camera']) && parseFloat(item['mode_max']) > parseFloat(item['camera']))) {
                                availability = '<i class="fa fa-times" aria-hidden="true" style="color: red"></i>'
                            } else {
                                availability = '<i class="fa fa-check" aria-hidden="true" style="color: green"></i>';

                            }
                            table += "<tr><th scope='row' class='hint--medium hint--bottom' aria-label='"+item['explanation']+"'>"+ i.replace(/_/g, " ").toUpperCase() + "   &#9432;</th><td>" + item['mode_min']+ " - " + item['mode_max'] + "</td><td>" + item['camera'] + "</td><td>" + availability + "</td></tr>";

                        }});
                    table += "</tbody></table>";
                    $('#mode-to-camera-comparison-detail').append(table);
                });
            }