Chartjs-Ng2-charts โ€“ Tolltip color dont match line color

0๐Ÿ‘

โœ…

I ended up using the tooltips callback function labelColor to set the right color for the given dataset index.

enter image description here

public chartOptions: ChartOptions = {
  responsive: true,
  tooltips: {
    mode: 'index',
    intersect: false,
    callbacks: {
      labelColor: function(context) {
        return {
            borderColor: context.datasetIndex === 0 ? 'rgba(255, 0, 0, 1)' : 'rgba(255, 0, 0, .3)',
            backgroundColor: context.datasetIndex === 0 ? 'rgba(255, 0, 0, 1)' : 'rgba(255, 0, 0, .3)',
        };
      },
    }
  },
  maintainAspectRatio: false,
  legend: {
    display: false,
  },
  scales: {
    xAxes:  [
      {
        gridLines: {
          drawBorder: false,
          display: false,
        },
      },
    ],
    yAxes: [
      {
        ticks: {
          maxTicksLimit: 3,
        },
        gridLines: {
          drawBorder: false,
        },
      },
    ],
  },
};

Leave a comment