Chartjs-Chart.js Mouse Over Show Old Chart Data

by

0👍

✅

this happens because chartjs uses canvas and for redrawing you just have to destroy old drawing from the canvas.
when you make a new chart then you have to destroy the old chart.
but in angular you can also just reload the component to destroy the chart

your method

//this method 
initChart(){
 //this will generate chart you need
 //before generating just destroy the old chart
}

second method

//in html file
<thisIsHTMLTagOfChartComponent *ngIf="showChart">

</thisIsHTMLTagOfChartComponent>

//in typescript
public showChart = false;

//this function will be called everytime you fetch the data from server
getChartData(){
 this.showChart = false; //this will remove the component from the page
 fetchData(uri)
 .then(result => {
   //do your stuff here
   this.showChart = true // this will load the component in the page again
 }
 )

0👍

i prefer to not destroy your chart just change the value of it for e.g: in your change function just load a new chart definition in your same chart with new config, we have 2 different configs:

config = {
      type: 'bar',
      data: {
        labels: dringlichkeiten.map(x => x.id),
        datasets: [
          {
            label: 'My Bar Chart',
            data: dringlichkeiten.map(x => x.value),
            backgroundColor: ['red', 'green', 'yellow', 'blue', 'orange']
          }
        ]
      },
    }
  config2 = {
      type: 'line',

      data: {
        datasets: [{
          label: 'Höhenlinie',
          backgroundColor: "rgba(255, 99, 132,0.4)",
          borderColor: "rgb(255, 99, 132)",
          fill: true,
          data: [
            { x: 1, y: 2 },
            { x: 2500, y: 2.5 },
            { x: 3000, y: 5 },
            { x: 3400, y: 4.75 },
            { x: 3600, y: 4.75 },
            { x: 5200, y: 6 },
            { x: 6000, y: 9 },
            { x: 7100, y: 6 },
          ],
        }]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Höhenlinie'
        },
        scales: {
          xAxes: [{
            type: 'linear',
            position: 'bottom',
            ticks: {
              userCallback: function (tick) {
                if (tick >= 1000) {
                  return (tick / 1000).toString() + 'km';
                }
                return tick.toString() + 'm';
              }
            },
            scaleLabel: {
              labelString: 'Länge',
              display: true,
            }
          }],
          yAxes: [{
            type: 'linear',
            ticks: {
              userCallback: function (tick) {
                return tick.toString() + 'm';
              }
            },
            scaleLabel: {
              labelString: 'Höhe',
              display: true
            }
          }]
        }
      }
    }
  chart: Chart ;

in your change function just load a new config: 

change(){
    this.chart = new Chart('canvas', this.config2)
  }

DEMO.

Leave a comment