score:2

you can adjust the bodylines.foreach loop to alter the value it shows like so:

bodylines.foreach(function(body, i) {
    let [label, value] = body[0].split(': ');
    value = `£${value.split('.')[0]}`
    innerhtml += '<tr><td><div class="tooltip">' + `${label}: ${value}` + '</div></td></tr>';
});

const options = {
  type: 'line',
  data: {
    labels: ["red", "blue", "yellow", "green", "purple", "orange"],
    datasets: [{
      label: 'invoicable',
      data: [120000.5, 190000.7, 30000.2, 50000.3, 20000.9, 30000.1],
      bordercolor: 'pink',
      backgroundcolor: 'pink',
    }]
  },
  options: {
    locale: 'en-en',
    plugins: {
      tooltip: {
        // disable the on-canvas tooltip
        enabled: false,

        external: function(context) {
          // tooltip element
          let tooltipel = document.getelementbyid('chartjs-tooltip');

          // create element on first render
          if (!tooltipel) {
            tooltipel = document.createelement('div');
            tooltipel.id = 'chartjs-tooltip';
            tooltipel.innerhtml = '<table></table>';
            document.body.appendchild(tooltipel);
          }

          // hide if no tooltip
          const tooltipmodel = context.tooltip;
          if (tooltipmodel.opacity === 0) {
            tooltipel.style.opacity = 0;
            return;
          }

          // set caret position
          tooltipel.classlist.remove('above', 'below', 'no-transform');
          if (tooltipmodel.yalign) {
            tooltipel.classlist.add(tooltipmodel.yalign);
          } else {
            tooltipel.classlist.add('no-transform');
          }

          function getbody(bodyitem) {
            return bodyitem.lines;
          }

          // set text
          if (tooltipmodel.body) {

            const titlelines = tooltipmodel.title || [];
            const bodylines = tooltipmodel.body.map(getbody);

            let innerhtml = '<thead>';

            titlelines.foreach(function(title) {
              innerhtml += '<tr><th>' + title + '</th></tr>';
            });
            innerhtml += '</thead><tbody>';

            bodylines.foreach(function(body, i) {
              let [label, value] = body[0].split(': ');
              value = `£${value.split('.')[0]}`
              innerhtml += '<tr><td><div class="tooltip">' + `${label}: ${value}` + '</div></td></tr>';
            });
            innerhtml += '</tbody>';

            let tableroot = tooltipel.queryselector('table');
            tableroot.innerhtml = innerhtml;
          }

          const position = context.chart.canvas.getboundingclientrect();
          const bodyfont = chart.helpers.tofont(tooltipmodel.options.bodyfont);

          // display, position, and set styles for font
          tooltipel.style.opacity = .8;
          tooltipel.style.position = 'absolute';
          tooltipel.style.left = position.left + window.pagexoffset + tooltipmodel.caretx + 'px';
          tooltipel.style.top = position.top + window.pageyoffset + tooltipmodel.carety + 'px';
          tooltipel.style.font = bodyfont.string;
          tooltipel.style.padding = tooltipmodel.padding + 'px ' + tooltipmodel.padding + 'px';
          tooltipel.style.pointerevents = 'none';
        }
      }
    }
  }
}

const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
const chart = new chart(ctx, options);
<body>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.js"></script>
</body>


Related Query

More Query from same tag