CODEWITHSUNDEEP
chart.jsng2-charts
Jesper
Jesper

Reputation: 2814

ng2-charts tooltip and legend stopped working

The chart has been working fine, but suddenly it isn't anymore. Here's a demonstration of the problem.

As you can see, the tooltips are transparent and flickering, and they don't move to the next point I'm hovering over. Also, the legend doesn't turn the lines on/off when I click on their labels.

Here are my options:

export const LineChartLevel3Options = {
lineChartLabels: ["Tid1", "Tid2", "Tid3", "Tid4"],
lineChartOptions: {
responsive: false,
title: {
  display: true,
  text: 'Graf over vitale værdier',
  fontColor: 'black',
  fontSize: 20,
},
legend: {
  labels: {
    fontColor: '#CCC'
  }
},
scales: {
  yAxes: [{
    ticks: {
      fontColor: '#CCC'
    },
    gridLines: {
      color: 'rgba(0, 0, 0, 1)'
    }
  }],
  xAxes: [{
    ticks: {
      fontColor: '#CCC'
    },
    gridLines: {
      color: 'rgba(0, 0, 0, 1)'
    }
  }],
}


},
  lineChartColors: [
    { // grey
      backgroundColor: 'rgba(255,0,0,0.3)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ],
  lineChartLegend: true,
  lineChartType: 'line',
};

And the HTML:

<canvas baseChart width="650" height="250" [datasets]="getJoinedChartData(patientService.patientLevel3)" [labels]="lineChart3.lineChartLabels" [options]="lineChart3.lineChartOptions"
        [colors]="lineChart3.lineChartColors" [legend]="lineChart3.lineChartLegend" [chartType]="lineChart3.lineChartType">
      </canvas>

EDIT: It seems like it has something to do with my datasets and labels. I copied the line chart from valor-software's website and it worked until I used my own labels and datasets with that one. Still haven't figured out what's wrong with them.

Upvotes: 1

Views: 1684

Answers (1)

Jesper
Jesper

Reputation: 2814

It turned out that binding the dataset of the chart to a method is a bad idea. The getJoinedChartData() method took some data of one of the patient objects of my application and returned it as an array that could be used with the chart. Instead I created a variable in my component and assigned the array to that, then bound the dataset to that variable. Everything is fine now.

Upvotes: 4

Related Questions