tooltip label callback dosent get the right x coordinate, but it renders in the chart at right place

[ronyeh3]

Hi, im not new to ng2-chart. let me introduce an issue I'm using x and y coordinates as a dataset, it seems that the label xLabel always getting "0", although I'm setting "2" (although they are deprecated i can see in the debugger that also corresponding "label" field value get the "0")

the odd is that the yLabel does get the correct y coordinate, the x coordinate does render in the right place, but the just tooltip xLabel doesn't get the value

if im using chartType as 'scatter' instead of 'line', the xLabel works. .. but its ruin the colors configuration (and the x-axis changes dynamically which is not my wanted behavior )

HTML

<canvas #dot_chart [chartType]="'line'" [datasets]="dotChartData" [labels]="dotChartLabels"
              [options]="lineDotChartOptions" [plugins]="DotChartPlugins" [colors]="lineAndDotChartColors"
              baseChart id="dot_chart">

JS CHART OPTIONS

dotChartLabels: Array<any> = [ "0", "1", '2', '', '', '', ''];

lineDotChartOptions: any = {
    // responsive: true,

    legend: {
      display: false  // display top labels
    },
    tooltips: {
      callbacks: {
        label: tooltipItem => `(${tooltipItem.xLabel}, ${tooltipItem.yLabel})`, --> problem here
        title: () => null,
      }
    },

    scales: {

      yAxes: [{
        ticks: {
          max: 30,   // green 0-10 , yellow 10-20 , red 20-30
          min: 0,
          steps: 30,
          stepValue: 1,
          // display: false,
          // max: 100,
          // suggestedMax: 6,
          callback: function (value, index, values) {
            switch (value) {
              case 5:
                return 'unobstructed';
              case 15:
                return 'equivocal';
              case 25:
                return 'obstructed';
              default:
                return '';
            }
          }
        },

        scaleLabel: {
          display: false,
          labelString: 'level'
        },
        gridLines: {
          // color: 'rgba(171,171,171,1)',
          // lineWidth: 0.5,
          drawBorder: true,
          display: false,
          // drawOnChartArea: false
        },


      }],
      xAxes: [{
        ticks: {
          steps: 6,
          stepValue: 1,
          // padding: 20 /// ???
          // max: 100,
          // suggestedMax: 6,
          min: 1,
          max: 6
        },

        scaleLabel: {
          display: false,
          labelString: 'dot level'
        },
        gridLines: {
          // color: 'rgba(171,171,171,1)',
          // lineWidth: 0.5,
          drawBorder: true,
          display: false,
          // drawOnChartArea: false
        },


      }]
    }


  };

dotChartData = [
    {
      label: "0",
      data: [],
      fill: false,   // not fill area underneath the graph
      // hidden : true  // autohide
      pointRadius: 10,
      // pointHoverRadius: 15,
      // showLine: false // no line shown
    },
    {
      data: [],
      label: "1",
      fill: false,
    }, //<--data columns
    {
      data: [],
      label: "2",
      fill: false,
    },
]

JS CODE TO INSERT NEW DATASET

...
const this_dot_chart = this.charts.last.chart;
dot_dataset = getfirst_Dattaset_Avalibale(this_dot_chart.config.data.datasets); 
      dot_dataset_obj.data = [{x :2   , y: 3  }];
    this_chart.update();

[paviad]

First of all we'd appreciate if you create a stackblitz showing the problem, if we have to do it ourselves for every issue, we'll never get any work done.

Secondly, have you by any chance checked if this bad behavior is specific to ng2-charts or does plain JS chart.js also behaves in the same way?

[deryfebriantara]

Hi @paviad, I face similar problem, the tooltip doesn't show the correct label. here I create stackblitz to reproduce it, https://stackblitz.com/edit/ng2-charts-tooltip-mismatch thank you in advance.

[Arieru]

I am facing the same issue for bar chart. Does anyone has a workaround? I also created a stackblitz with ng2-charts and I was able to reproduce it as well: stackblitz-demo

[Arieru]

The 2nd answer here solved my problem: https://stackoverflow.com/questions/44965174/javascript-chart-js-tooltip-shows-wrong-x-axis-value