Chart.js how to add labels to plot

HTML-CSS
1

I’m using chart.js 4.2.1. I’m running a Flask server where I send scatter plot data together with labels to the webpage. The labels are sent as an string as follows: ['test1', 'test2', 'test3']

const embedding_data = {
        datasets: [
            {
                type: 'line',
                data: [],
                backgroundColor: 'rgb(168, 38, 8)',
                borderColor: 'rgb(168, 38, 8)',
                pointRadius: 0,
                borderWidth: 3,
                order: 2
            },
            {
                type: 'scatter',
                backgroundColor: 'rgb(168, 38, 8)',
                borderColor: 'rgb(168, 38, 8)',
                data: [],
                pointRadius: 3,
                order: 3
            },
            {
                type: 'scatter',
                backgroundColor: 'rgb(46, 179, 84)',
                borderColor: 'rgb(46, 179, 84)',
                data: [],
                pointRadius: 3,
                order: 1
            },
            {
                type: 'scatter',
                labels: {{ labels }},
                backgroundColor: 'rgb(52, 110, 235)',
                borderColor: 'rgb(52, 110, 235)',
                data: {{ data }},
                pointRadius: 1,
                order: 4
            }
        ]
    };
    const config = {
        type: 'scatter',
        data: embedding_data,
        options: {  maintainAspectRatio: true,
                    events: [],
                    aspectRatio: 1,
                    plugins:{
                        legend: {
                            display: false
                        },
                    },
                    scales:{
                        x: {
                            display: false
                        },
                        y: {
                            display: false
                        },
                    }
                 }
    };
    const myChart = new Chart(
        document.getElementById('myChart'),
        config
    );

Using data: {{ data }} works without any problems but when I add labels: {{ labels }} I’m getting the error Uncaught SyntaxError: Unexpected token '&' pointing to the line where I do labels: {{ labels }}. In the labels I don’t have any &.

Is the syntax for labels that I’m using wrong?

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.