I have the following HTML/JS code as follows which takes two lists:

• labels
• values

And converts it into a line chart with labels on the points:

<div style = "position:relative; bottom:140px; z-index: -2;">
<canvas id="lineChart" width = 600 height = 200></canvas>
<script>
    Chart.register(ChartDataLabels);
    var ctx = document.getElementById("lineChart").getContext("2d");
    var linechart = new Chart(ctx, {
        type: "line",
        data: {
            labels: {{ labels | safe}},
            datasets: [
                {
                    label: "Data points",
                    data: {{ values | safe}},
                    fill: false,
                    borderColor: "rgb(75, 192, 192)",
                    lineTension: 0.5
                }
            ]
        },
        options: {
        responsive: true,
        layout: {
            padding: {
                top: 100
                    }
                },
        scales: {
          x: {
            grid: {
              display: false
            }
          },
          y: {
            display: false,
          }
        },

        plugins: {
            legend: {
                display: false
            },
            datalabels: {
                anchor: 'end',
                align: 'top',
                formatter: Math.round,
                font: {
                    weight: 'bold',
                    size: 15
                }
            }

        }
        }
    });
</script>

This is working fine:

However, I want the labels to have the '£' symbol before and 'm' after

Every time I try to use the formatter function like:

formatter: function(value){
            return value + 'm';

Or any other combination, the chart fails to return. I am completely perplexed why.

Any suggestions?