Tooltip causing reverting to old chart when rendering different charts in same canvas

If I render one bar chart with certain data then render a different chart with (new Bar Chart Obj), but use the same canvas, when I mouse over the new chart to show the tooltip – it will revert back to the old chart!!

I even tried to call clear on the Obj reference and also tried clearing the canvas manually – no luck.

Insights?

Author: Fantashit

2 thoughts on “Tooltip causing reverting to old chart when rendering different charts in same canvas

  1. Try to create a global chart instance and before update it, use .destroy() to clear the old chart instances. This is happening because you’re creating new instances over the same canvas and then the old points in the chat call their tooltip function what causes the old charts to show up.

    I did this in my chart to solve this problem:

    ...
    if($scope.myLineChart !== undefined || $scope.myLineChart !== null){
                $scope.myLineChart.destroy();
    }
    ...
  2. @jeetu3indra @zurez
    I was using AngularJS with my chart. So I could add global instances to my app by
    $scope.myLineChart = new Chart(ctx).Line() (Add to my scope a Chart.js instance).

    However, if you are using pure javascript as I think you are:
    From this example in the documentation you can use window.myLine = new Chart(ctx).Line() where you would make the chart a global instance in the DOM (window).

    If you use window to create a global object, I believe you don’t even need to use the destroy like I did, in order to avoid the overlap. Since the replace of the object deletes the old version in the DOM.
    But if it doesnt happen, just do like I did using window in the beginning of your update function :

    ...
    if(window.myLineChart !== undefined || window.myLineChart !== null){
                window.myLineChart.destroy();
    }
    ...

    I hope it can help you. 😄

Comments are closed.