[Chartjs]-Problems hovering over ChartJS bar chart after being redrawn

by

2👍

✅

You should modify your chartType binding handler to make it clear previously created charts before creating new one. Otherwise hovering areas of new charts will interfere with those from old chart.

ko.bindingHandlers.chartType = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        if (!allBindings.has('chartData')) {
            throw Error('chartType must be used in conjunction with chartData and (optionally) chartOptions');
        }
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      var ctx = element.getContext('2d'),
        type = ko.unwrap(valueAccessor()),
        data = ko.toJS(allBindings.get('chartData')),
        options = ko.unwrap(allBindings.get('chartOptions')) || {};

      if (chart) {
        console.debug(chart)
        chart.destroy();
        delete chart;
      }

      if (Object.keys(data).length != 0) {
        // destroy old chart
        var self = ko.bindingHandlers.chartType;
        self.chart && self.chart.destroy();
        // create new
        var chart = new Chart(ctx)[type](data, options);
        self.chart = chart;
      }
    },
    chart: null
};

http://jsfiddle.net/aqa8w19d/1/

Update

Yes, the above handler stores the current chart inside of its definition so all instances of chartType binding share the same property ko.bindingHandlers.chartType.chart. The problem may be solved by storing every chart object separately for every bound element (e.g. as <canvas> element user property):

if (Object.keys(data).length != 0) {
    // destroy old chart
    element.chart && element.chart.destroy();
    // create new
    var chart = new Chart(ctx)[type](data, options);
    element.chart = chart;
}

Updated fiddle: http://jsfiddle.net/aqa8w19d/3/

Leave a comment