Chartjs-Update chart.js after form submission and page reload

let flag = 0;
var xChart = "";
function dibujar(valor, meses) {
    try {
        if (valor.length > 0) {
            $('#grafico').fadeIn('fast');
            var canvas = document.getElementById('chart');
            let tipGra = $('#slcTipGra').val();

            if (flag !== 0) {
                xChart.destroy();
            }
            //rgba(54, 162, 235, 0.2)
            if (tipGra === "bar" || tipGra === "horizontalBar") {
                var data = {
                    labels: meses,
                    datasets: [
                        {
                            label: "Dólares($)",
                            backgroundColor: "#3e95cd",
                            borderColor: "#3e95cd",
                            borderWidth: 2,
                            hoverBackgroundColor: "#3e95cd",
                            hoverBorderColor: "#3e95cd",
                            data: valor,
                        }
                    ]
                };

                var option = {
                    title: {
                        display: true,
                        fontSize: 20,
                        fontFamily: 'Helvetica',
                        text: 'Reporte Mensual de Ventas'
                    },
                    plugins: {
                        datalabels: {
                            color: 'white',
                            anchor: 'end',
                            align: 'start',
                            font:
                            {
                                weight: 'bold'
                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            stacked: true,
                            gridLines:
                            {
                                display: true,
                                color: "rgba(255,99,132,0.2)"
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: true
                            }
                        }]
                    }
                };
            }

            if (tipGra === 'line') {
                var data = {
                    labels: meses,
                    datasets: [
                        {
                            label: "Dólares($)",
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: "rgba(75,192,192,0.4)",
                            borderColor: "rgba(75,192,192,1)",
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: "rgba(75,192,192,1)",
                            pointBackgroundColor: "#fff",
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: "rgba(75,192,192,1)",
                            pointHoverBorderColor: "rgba(220,220,220,1)",
                            pointHoverBorderWidth: 2,
                            pointRadius: 5,
                            pointHitRadius: 10,
                            data: valor,
                        }
                    ]
                };

                var option = {
                    title: {
                        display: true,
                        fontSize: 20,
                        fontFamily: 'Helvetica',
                        text: 'Reporte Mensual de Ventas'
                    },
                    plugins: {
                        datalabels: {
                            backgroundColor: function (context) {
                                return context.dataset.borderColor;
                            },
                            borderRadius: 4,
                            color: 'white',
                            anchor: 'end',
                            align: 'end',
                        }
                    },
                    showLines: true
                };
            }

            xChart = new Chart(canvas,
                {
                    type: tipGra,
                    data: data,
                    options: option
                });
            flag = 1;
        }
        else {
            $('#grafico').fadeOut('fast');
            $('#graficoMessage').fadeIn('slow');
        }
    } catch (err) {
        console.log(err);
    }
}