$(function() {
    /* ChartJS */

    "use strict";
    if ($("#mixed-chart").length) {
        var chartData = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
            datasets: [
                {
                    type: "line",
                    label: "Revenue",
                    data: ["23", "33", "32", "65", "21", "45", "35"],
                    backgroundColor: ChartColor[2],
                    borderColor: ChartColor[2],
                    borderWidth: 3,
                    fill: false
                },
                {
                    type: "bar",
                    label: "Standard",
                    data: ["53", "28", "19", "29", "30", "51", "55"],
                    backgroundColor: ChartColor[0],
                    borderColor: ChartColor[0],
                    borderWidth: 2
                },
                {
                    type: "bar",
                    label: "Extended",
                    data: ["34", "16", "46", "54", "42", "31", "49"],
                    backgroundColor: ChartColor[1],
                    borderColor: ChartColor[1]
                }
            ]
        };
        var MixedChartCanvas = document
            .getElementById("mixed-chart")
            .getContext("2d");
        lineChart = new Chart(MixedChartCanvas, {
            type: "bar",
            data: chartData,
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: "Revenue and number of lincences sold",
                    fontColor: chartFontcolor
                },
                scales: {
                    xAxes: [
                        {
                            display: true,
                            ticks: {
                                fontColor: chartFontcolor,
                                stepSize: 50,
                                min: 0,
                                max: 150,
                                autoSkip: true,
                                autoSkipPadding: 15,
                                maxRotation: 0,
                                maxTicksLimit: 10
                            },
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor
                            }
                        }
                    ],
                    yAxes: [
                        {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: "Number of Sales",
                                fontSize: 12,
                                lineHeight: 2,
                                fontColor: chartFontcolor
                            },
                            ticks: {
                                fontColor: chartFontcolor,
                                display: true,
                                autoSkip: false,
                                maxRotation: 0,
                                stepSize: 50,
                                min: 0,
                                max: 100
                            },
                            gridLines: {
                                drawBorder: false,
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor
                            }
                        }
                    ]
                },
                legend: {
                    display: false
                },
                legendCallback: function(chart) {
                    var text = [];
                    text.push(
                        '<div class="chartjs-legend d-flex justify-content-center mt-4"><ul>'
                    );
                    for (var i = 0; i < chart.data.datasets.length; i++) {
                        console.log(chart.data.datasets[i]); // see what's inside the obj.
                        text.push("<li>");
                        text.push(
                            '<span style="background-color:' +
                                chart.data.datasets[i].borderColor +
                                '">' +
                                "</span>"
                        );
                        text.push(chart.data.datasets[i].label);
                        text.push("</li>");
                    }
                    text.push("</ul></div>");
                    return text.join("");
                }
            }
        });
        document.getElementById(
            "mixed-chart-legend"
        ).innerHTML = lineChart.generateLegend();
    }
    if ($("#lineChart").length) {
        var lineData = {
            labels: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sep"
            ],
            datasets: [
                {
                    data: [0, 205, 75, 150, 100, 150, 50, 100, 80],
                    backgroundColor: ChartColor[0],
                    borderColor: ChartColor[0],
                    borderWidth: 3,
                    fill: "false",
                    label: "Sales"
                }
            ]
        };
        var lineOptions = {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                filler: {
                    propagate: false
                }
            },
            scales: {
                xAxes: [
                    {
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Month",
                            fontSize: 12,
                            lineHeight: 2,
                            fontColor: chartFontcolor
                        },
                        ticks: {
                            fontColor: chartFontcolor,
                            stepSize: 50,
                            min: 0,
                            max: 150,
                            autoSkip: true,
                            autoSkipPadding: 15,
                            maxRotation: 0,
                            maxTicksLimit: 10
                        },
                        gridLines: {
                            display: false,
                            drawBorder: false,
                            color: "transparent",
                            zeroLineColor: "#eeeeee"
                        }
                    }
                ],
                yAxes: [
                    {
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Number of sales",
                            fontSize: 12,
                            lineHeight: 2,
                            fontColor: chartFontcolor
                        },
                        ticks: {
                            fontColor: chartFontcolor,
                            display: true,
                            autoSkip: false,
                            maxRotation: 0,
                            stepSize: 100,
                            min: 0,
                            max: 300
                        },
                        gridLines: {
                            drawBorder: false,
                            color: chartGridLineColor,
                            zeroLineColor: chartGridLineColor
                        }
                    }
                ]
            },
            legend: {
                display: false
            },
            legendCallback: function(chart) {
                var text = [];
                text.push('<div class="chartjs-legend"><ul>');
                for (var i = 0; i < chart.data.datasets.length; i++) {
                    console.log(chart.data.datasets[i]); // see what's inside the obj.
                    text.push("<li>");
                    text.push(
                        '<span style="background-color:' +
                            chart.data.datasets[i].borderColor +
                            '">' +
                            "</span>"
                    );
                    text.push(chart.data.datasets[i].label);
                    text.push("</li>");
                }
                text.push("</ul></div>");
                return text.join("");
            },
            elements: {
                line: {
                    tension: 0
                },
                point: {
                    radius: 0
                }
            }
        };
        var lineChartCanvas = $("#lineChart")
            .get(0)
            .getContext("2d");
        var lineChart = new Chart(lineChartCanvas, {
            type: "line",
            data: lineData,
            options: lineOptions
        });
        document.getElementById(
            "line-traffic-legend"
        ).innerHTML = lineChart.generateLegend();
    }
    if ($("#areaChart").length) {
        var gradientStrokeFill_1 = lineChartCanvas.createLinearGradient(
            1,
            2,
            1,
            280
        );
        gradientStrokeFill_1.addColorStop(0, "rgba(20, 88, 232, 0.37)");
        gradientStrokeFill_1.addColorStop(1, "rgba(255,255,255,0.4)");
        var lineData = {
            labels: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sep"
            ],
            datasets: [
                {
                    data: [0, 205, 75, 150, 100, 150, 50, 100, 80],
                    backgroundColor: gradientStrokeFill_1,
                    borderColor: ChartColor[0],
                    borderWidth: 3,
                    fill: true,
                    label: "Marketing"
                }
            ]
        };
        var lineOptions = {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                filler: {
                    propagate: false
                }
            },
            scales: {
                xAxes: [
                    {
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Month",
                            fontColor: chartFontcolor,
                            fontSize: 12,
                            lineHeight: 2
                        },
                        ticks: {
                            autoSkip: true,
                            autoSkipPadding: 35,
                            maxRotation: 0,
                            maxTicksLimit: 10,
                            fontColor: chartFontcolor
                        },
                        gridLines: {
                            display: false,
                            drawBorder: false,
                            color: chartGridLineColor,
                            zeroLineColor: chartGridLineColor
                        }
                    }
                ],
                yAxes: [
                    {
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Number of user",
                            fontSize: 12,
                            fontColor: chartFontcolor,
                            lineHeight: 2
                        },
                        ticks: {
                            display: true,
                            autoSkip: false,
                            maxRotation: 0,
                            stepSize: 100,
                            min: 0,
                            max: 300,
                            fontColor: chartFontcolor
                        },
                        gridLines: {
                            drawBorder: false,
                            color: chartGridLineColor,
                            zeroLineColor: chartGridLineColor
                        }
                    }
                ]
            },
            legend: {
                display: false
            },
            legendCallback: function(chart) {
                var text = [];
                text.push('<div class="chartjs-legend"><ul>');
                for (var i = 0; i < chart.data.datasets.length; i++) {
                    console.log(chart.data.datasets[i]); // see what's inside the obj.
                    text.push("<li>");
                    text.push(
                        '<span style="background-color:' +
                            chart.data.datasets[i].borderColor +
                            '">' +
                            "</span>"
                    );
                    text.push(chart.data.datasets[i].label);
                    text.push("</li>");
                }
                text.push("</ul></div>");
                return text.join("");
            },
            elements: {
                line: {
                    tension: 0
                },
                point: {
                    radius: 0
                }
            }
        };
        var lineChartCanvas = $("#areaChart")
            .get(0)
            .getContext("2d");
        var lineChart = new Chart(lineChartCanvas, {
            type: "line",
            data: lineData,
            options: lineOptions
        });
        document.getElementById(
            "area-traffic-legend"
        ).innerHTML = lineChart.generateLegend();
    }
    if ($("#barChart").length) {
        var barChartCanvas = $("#barChart")
            .get(0)
            .getContext("2d");
        var barChart = new Chart(barChartCanvas, {
            type: "bar",
            data: {
                labels: [
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "Jun",
                    "Jul",
                    "Aug",
                    "Sep",
                    "Oct",
                    "Nov",
                    "Dec"
                ],
                datasets: [
                    {
                        label: "Profit",
                        data: [15, 28, 14, 22, 38, 30, 40, 70, 85, 50, 23, 20],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0
                    }
                },
                scales: {
                    xAxes: [
                        {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: "Sales by year",
                                fontColor: chartFontcolor,
                                fontSize: 12,
                                lineHeight: 2
                            },
                            ticks: {
                                fontColor: chartFontcolor,
                                stepSize: 50,
                                min: 0,
                                max: 150,
                                autoSkip: true,
                                autoSkipPadding: 15,
                                maxRotation: 0,
                                maxTicksLimit: 10
                            },
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor
                            }
                        }
                    ],
                    yAxes: [
                        {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: "revenue by sales",
                                fontColor: chartFontcolor,
                                fontSize: 12,
                                lineHeight: 2
                            },
                            ticks: {
                                display: true,
                                autoSkip: false,
                                maxRotation: 0,
                                fontColor: chartFontcolor,
                                stepSize: 50,
                                min: 0,
                                max: 150
                            },
                            gridLines: {
                                drawBorder: false,
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor
                            }
                        }
                    ]
                },
                legend: {
                    display: false
                },
                legendCallback: function(chart) {
                    var text = [];
                    text.push('<div class="chartjs-legend"><ul>');
                    for (var i = 0; i < chart.data.datasets.length; i++) {
                        console.log(chart.data.datasets[i]); // see what's inside the obj.
                        text.push("<li>");
                        text.push(
                            '<span style="background-color:' +
                                chart.data.datasets[i].backgroundColor +
                                '">' +
                                "</span>"
                        );
                        text.push(chart.data.datasets[i].label);
                        text.push("</li>");
                    }
                    text.push("</ul></div>");
                    return text.join("");
                },
                elements: {
                    point: {
                        radius: 0
                    }
                }
            }
        });
        document.getElementById(
            "bar-traffic-legend"
        ).innerHTML = barChart.generateLegend();
    }
    if ($("#stackedbarChart").length) {
        var stackedbarChartCanvas = $("#stackedbarChart")
            .get(0)
            .getContext("2d");
        var stackedbarChart = new Chart(stackedbarChartCanvas, {
            type: "bar",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
                datasets: [
                    {
                        label: "Desktop",
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 1,
                        data: [55, 45, 44, 54, 38, 40, 50]
                    },
                    {
                        label: "Mobile",
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 1,
                        data: [34, 20, 54, 34, 65, 40, 35]
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                legend: false,
                categoryPercentage: 0.5,
                stacked: true,
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0
                    }
                },
                scales: {
                    xAxes: [
                        {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: "User by time",
                                fontColor: chartFontcolor,
                                fontSize: 12,
                                lineHeight: 2
                            },
                            ticks: {
                                fontColor: chartFontcolor,
                                stepSize: 50,
                                min: 0,
                                max: 150,
                                autoSkip: true,
                                autoSkipPadding: 15,
                                maxRotation: 0,
                                maxTicksLimit: 10
                            },
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor
                            }
                        }
                    ],
                    yAxes: [
                        {
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: "Number of users",
                                fontColor: chartFontcolor,
                                fontSize: 12,
                                lineHeight: 2
                            },
                            ticks: {
                                fontColor: chartFontcolor,
                                stepSize: 50,
                                min: 0,
                                max: 150,
                                autoSkip: true,
                                autoSkipPadding: 15,
                                maxRotation: 0,
                                maxTicksLimit: 10
                            },
                            gridLines: {
                                drawBorder: false,
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor
                            }
                        }
                    ]
                },
                legend: {
                    display: false
                },
                legendCallback: function(chart) {
                    var text = [];
                    text.push('<div class="chartjs-legend"><ul>');
                    for (var i = 0; i < chart.data.datasets.length; i++) {
                        console.log(chart.data.datasets[i]); // see what's inside the obj.
                        text.push("<li>");
                        text.push(
                            '<span style="background-color:' +
                                chart.data.datasets[i].backgroundColor +
                                '">' +
                                "</span>"
                        );
                        text.push(chart.data.datasets[i].label);
                        text.push("</li>");
                    }
                    text.push("</ul></div>");
                    return text.join("");
                },
                elements: {
                    point: {
                        radius: 0
                    }
                }
            }
        });
        document.getElementById(
            "stacked-bar-traffic-legend"
        ).innerHTML = stackedbarChart.generateLegend();
    }
    if ($("#radarChart").length) {
        var marksCanvas = document.getElementById("radarChart");
        var marksData = {
            labels: [
                "English",
                "Maths",
                "Physics",
                "Chemistry",
                "Biology",
                "History"
            ],
            datasets: [
                {
                    label: "Student A",
                    backgroundColor: ChartColor[0],
                    borderColor: ChartColor[0],
                    borderWidth: 0,
                    fill: true,
                    radius: 6,
                    pointRadius: 5,
                    pointBorderWidth: 0,
                    pointBackgroundColor: ChartColor[4],
                    pointHoverRadius: 10,
                    data: [54, 45, 60, 70, 54, 75]
                },
                {
                    label: "Student B",
                    backgroundColor: ChartColor[1],
                    borderColor: ChartColor[1],
                    borderWidth: 0,
                    fill: true,
                    radius: 6,
                    pointRadius: 5,
                    pointBorderWidth: 0,
                    pointBackgroundColor: ChartColor[1],
                    pointHoverRadius: 10,
                    data: [65, 75, 70, 80, 60, 80]
                }
            ]
        };

        var chartOptions = {
            scale: {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 100,
                    stepSize: 20,
                    display: false,
                    fontColor: chartFontcolor
                },
                pointLabels: {
                    fontSize: 14,
                    fontColor: chartFontcolor,
                    color: chartGridLineColor
                }
            },
            legend: false,
            legendCallback: function(chart) {
                var text = [];
                text.push('<div class="chartjs-legend"><ul>');
                for (var i = 0; i < chart.data.datasets.length; i++) {
                    console.log(chart.data.datasets[i]); // see what's inside the obj.
                    text.push("<li>");
                    text.push(
                        '<span style="background-color:' +
                            chart.data.datasets[i].backgroundColor +
                            '">' +
                            "</span>"
                    );
                    text.push(chart.data.datasets[i].label);
                    text.push("</li>");
                }
                text.push("</ul></div>");
                return text.join("");
            }
        };

        var radarChart = new Chart(marksCanvas, {
            type: "radar",
            data: marksData,
            options: chartOptions
        });
        document.getElementById(
            "radar-chart-legend"
        ).innerHTML = radarChart.generateLegend();
    }
    if ($("#doughnutChart").length) {
        var doughnutChartCanvas = $("#doughnutChart")
            .get(0)
            .getContext("2d");
        var doughnutPieData = {
            datasets: [
                {
                    data: [20, 80, 83],
                    backgroundColor: [
                        ChartColor[0],
                        ChartColor[1],
                        ChartColor[2]
                    ],
                    borderColor: [ChartColor[0], ChartColor[1], ChartColor[2]]
                }
            ],

            // These labels appear in the legend and in the tooltips when hovering different arcs
            labels: ["Sales", "Profit", "Return"]
        };
        var doughnutPieOptions = {
            cutoutPercentage: 75,
            animationEasing: "easeOutBounce",
            animateRotate: true,
            animateScale: false,
            responsive: true,
            maintainAspectRatio: true,
            showScale: true,
            legend: false,
            legendCallback: function(chart) {
                var text = [];
                text.push('<div class="chartjs-legend"><ul>');
                for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
                    text.push(
                        '<li><span style="background-color:' +
                            chart.data.datasets[0].backgroundColor[i] +
                            '">'
                    );
                    text.push("</span>");
                    if (chart.data.labels[i]) {
                        text.push(chart.data.labels[i]);
                    }
                    text.push("</li>");
                }
                text.push("</div></ul>");
                return text.join("");
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                }
            }
        };
        var doughnutChart = new Chart(doughnutChartCanvas, {
            type: "doughnut",
            data: doughnutPieData,
            options: doughnutPieOptions
        });
        document.getElementById(
            "doughnut-chart-legend"
        ).innerHTML = doughnutChart.generateLegend();
    }
    if ($("#pieChart").length) {
        var pieChartCanvas = $("#pieChart")
            .get(0)
            .getContext("2d");
        var pieChart = new Chart(pieChartCanvas, {
            type: "pie",
            data: {
                datasets: [
                    {
                        data: [30, 40, 30],
                        backgroundColor: [
                            ChartColor[0],
                            ChartColor[1],
                            ChartColor[2]
                        ],
                        borderColor: [
                            ChartColor[0],
                            ChartColor[1],
                            ChartColor[2]
                        ]
                    }
                ],
                labels: ["Sales", "Profit", "Return"]
            },
            options: {
                responsive: true,
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                legend: {
                    display: false
                },
                legendCallback: function(chart) {
                    var text = [];
                    text.push('<div class="chartjs-legend"><ul>');
                    for (
                        var i = 0;
                        i < chart.data.datasets[0].data.length;
                        i++
                    ) {
                        text.push(
                            '<li><span style="background-color:' +
                                chart.data.datasets[0].backgroundColor[i] +
                                '">'
                        );
                        text.push("</span>");
                        if (chart.data.labels[i]) {
                            text.push(chart.data.labels[i]);
                        }
                        text.push("</li>");
                    }
                    text.push("</div></ul>");
                    return text.join("");
                }
            }
        });
        document.getElementById(
            "pie-chart-legend"
        ).innerHTML = pieChart.generateLegend();
    }
    if ($("#scatterChart").length) {
        var options = {
            type: "bubble",
            data: {
                datasets: [
                    {
                        label: "John",
                        data: [
                            {
                                x: 3,
                                y: 10,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 2,
                                y: 2,
                                r: 10
                            }
                        ],
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[1]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 12,
                                y: 32,
                                r: 13
                            }
                        ],
                        backgroundColor: ChartColor[2],
                        borderColor: ChartColor[2],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[2]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 29,
                                y: 52,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 49,
                                y: 62,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[1]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 22,
                                y: 22,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[2],
                        borderColor: ChartColor[2],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[2]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 23,
                                y: 25,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[1]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 12,
                                y: 10,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[1]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 34,
                                y: 23,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[1]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 30,
                                y: 20,
                                r: 10
                            }
                        ],
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[1]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 12,
                                y: 17,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[1],
                        borderColor: ChartColor[1],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[1]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 32,
                                y: 37,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 52,
                                y: 57,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 77,
                                y: 40,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 67,
                                y: 40,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 47,
                                y: 20,
                                r: 10
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 77,
                                y: 10,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 57,
                                y: 10,
                                r: 10
                            }
                        ],
                        backgroundColor: ChartColor[0],
                        borderColor: ChartColor[0],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[0]
                    },
                    {
                        label: "Paul",
                        data: [
                            {
                                x: 57,
                                y: 40,
                                r: 5
                            }
                        ],
                        backgroundColor: ChartColor[3],
                        borderColor: ChartColor[3],
                        borderWidth: 0,
                        hoverBackgroundColor: ChartColor[3]
                    }
                ]
            },
            options: {
                legend: false,
                scales: {
                    xAxes: [
                        {
                            gridLines: {
                                display: false,
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor
                            },
                            ticks: {
                                autoSkip: true,
                                autoSkipPadding: 45,
                                maxRotation: 0,
                                maxTicksLimit: 10,
                                fontColor: chartFontcolor
                            }
                        }
                    ],
                    yAxes: [
                        {
                            gridLines: {
                                color: chartGridLineColor,
                                zeroLineColor: chartGridLineColor,
                                display: true
                            },
                            ticks: {
                                beginAtZero: true,
                                stepSize: 25,
                                max: 100,
                                fontColor: chartFontcolor
                            }
                        }
                    ]
                },
                legend: {
                    display: false
                },
                legendCallback: function(chart) {
                    var text = [];
                    text.push('<div class="chartjs-legend"><ul>');
                    for (var i = 0; i < chart.data.datasets.length; i++) {
                        console.log(chart.data.datasets[i]); // see what's inside the obj.
                        text.push("<li>");
                        text.push(
                            '<span style="background-color:' +
                                chart.data.datasets[i].backgroundColor +
                                '">' +
                                "</span>"
                        );
                        text.push(chart.data.datasets[i].label);
                        text.push("</li>");
                    }
                    text.push("</ul></div>");
                    return text.join("");
                }
            }
        };

        var ctx = document.getElementById("scatterChart").getContext("2d");
        new Chart(ctx, options);
        document.getElementById(
            "scatter-chart-legend"
        ).innerHTML = barChart.generateLegend();
    }
});