when chartjs change data from receive ajax response , on hover event at bars show old data

hi
i am using char js on my laravel project
char js is ok and no problem
i have filter form data that when clicked on filter button your chart data is changed and recieve from ajax response.

when chart is change data is ok but when hover over chart bar show old data of chart.

my code is :

let requestData = {};

function chartData(url, data) {
    console.log("data is :", data);
    let labels = [];
    let values = [];
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        dataType: "json",
        async: false,
        success: function (data) {
            $.each(data.data, function (key, value) {
                labels.push(key);
                values.push(value);
            });
        }
    });
    return {
        labels,
        values
    }
}

function updateChart(url, requestData) {
    let results = chartData(url, requestData);

    let ctx = document.getElementById("orders_chart").getContext('2d');
    let orderChart = new Chart(ctx, {
        type: 'bar',
        data: {},
        options: {
            title: {
                display: true,
                text: 'نمودار بر مبنای روز'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    orderChart.clear();
    orderChart.data = {
        labels: results.labels,
        datasets: [
            {
                label: "سفارش ها",
                backgroundColor: '#e74c3c',
                data: results.values,
            },
        ]
    };
    orderChart.update();
}

// first initial
updateChart(url, requestData);

$('#filter_btn').click(function () {

Author: Fantashit

1 thought on “when chartjs change data from receive ajax response , on hover event at bars show old data

  1. Either destroy the graph you have made with window.myBar.destroy() or change the data values of the graph then update:

    if ( typeof window.myBar == “object”){
    window.myBar.data = config.data;
    window.myBar.update();
    }
    Hope that helps.

Comments are closed.