Chartjs-Chartjs 3 ToolTip styling is not being picked up

by

0👍

✅

As described in the first sentence the namespace is options.plugins.tooltip while you put it in options.tooltips this is V2 syntax and thus wont work, changing this will resolve your issue.

const ctx = document.getElementById('numChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'This Week',
      data: [{
          x: '5',
          y: 5000
        }, {
          x: '10',
          y: 100000
        }, {
          x: '15',
          y: 5000
        }, {
          x: '20',
          y: 200000
        },
        {
          x: '30',
          y: 100000
        }, {
          x: '35',
          y: 5000
        }
      ],
      // green line color
      borderColor: 'rgba(34, 195, 107, 1)',
      // line smoothness
      lineTension: 0.4,
      //hide points
      pointRadius: 3,
      //increase the width of the line
      borderWidth: 6
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: "Balance",
          font: {
            size: 12,
            family: "'Urbanist', sans-serif",
          },
        },
        suggestedMin: 0,
        suggestedMax: 300000,
        grid: {
          color: 'rgb(33,34,37)'
        },
        ticks: {
          callback: function(value, index, ticks) {
            //adds the commas and the dollar sign
            return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);
          }
        }
      },
      x: {
        beginAtZero: true,
        position: 'bottom',
        title: {
          suggestedMin: 0,
          suggestedMax: 50,
        },
        grid: {
          display: false
        }
      }
    },
    plugins: {
      tooltip: {
        mode: 'nearest',
        backgroundColor: '#fff',
        displayColors: false
      },
      legend: {
        display: true,
        align: "end",
        labels: {
          usePointStyle: true,
          boxWidth: 4
        }
      },
      autocolors: false,
      title: {
        display: true,
        text: "Purchases per month",
        align: "start",
        color: "#ffff",
        font: {
          size: 18,
          weight: 700,
          lineHeight: 2
        },
        padding: {
          bottom: 20
        }
      },
    }
  }
});

Leave a comment