Chartjs-Chart.js overlapping tooltip text

by

0👍

What I personally do for all my custom charts is create a custom title / label independent of what I pass as options to the chart. I like to have control over the HTML / whatever which gets outputted to the label. You can do this with the callbacks key

  tooltips: {
    enabled: true,
    position: "nearest",
    caretSize: 20,
    mode: "index",
    intersect: false,
    titleFontSize: 16,
    titleFontColor: "white",
    backgroundColor: COLORS.DARK,
    callbacks: {
      title: (tooltipItem, _) => {
        return formatDate("LT", tooltipItem[0].xLabel);
      },
      label: (tooltipItem, _) => {
        const { yLabel } = tooltipItem;
        return `${yLabel} Sessions Recorded`;
      }
    }
  },

Leave a comment