Chartjs 3 ToolTip styling is not being picked up

user_9968694 0
Viewed 68

I am trying to customize the chartjs tooltip however the style is not being picked up. I am following the documentation here Chartjs Tooltip Documentation

All the other configuration are being picked up except for the tooltip. I am currently using Google Chrome and I have tried it in Firefox but it is still not being reflected. I also did a hard refresh and it remains the same.

enter image description here

This is my javascript.

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: {
            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
                }
            },
            tooltips: {
                mode: 'nearest',
                backgroundColor: '#fff',
                displayColors: false
            }
        }

    }
});
chart.js javascript
1 Answers

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
        }
      },
    }
  }
});
user_86829830
Related