How To Change The PointBackgroundColor Dynamically In ChartJS?-CodePudding

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing Chart.js Line Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1 190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <button type="button" onclick="add()" id="btnAdd">Add 10</button>
    <button type="button" onclick="subtract()" id="btnSubtract">Subtract 10</button>
    <canvas id="chart_canvas">Your browser does not support the HTML5 canvas tag.</canvas>

    <script type="text/javascript">

    // Set Chart Global Variables
    let x_values = [];
    let y_values = [];
    let new_number = 0;
    let index = 0;
    let chart_canvas = document.getElementById("chart_canvas");

    // Intialize Data
    x_values.push(index);
    y_values.push(index);

    // Create New Chart
    my_chart = new Chart(chart_canvas, {
        type: "line",
        data: {
            labels: [x_values[index]],
            datasets: [{
                backgroundColor: "#d8dee980",
                pointBackgroundColor: "#81a1c1ff",
                fill: true,
                pointStyle: "circle",
                label: "Values",
                data: [y_values[index]]
            }]
        }
    });

    // ------ Local Functions ------

    function add() {
        index = my_chart.data.datasets.length;
        new_number  = 10;
        my_chart.data.labels.push(index);
        my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
        });

        // -------
        //The below line is changing all point background colors instead of the last one only!
        my_chart.data.datasets[index - 1].pointBackgroundColor = "#88c0d0ff";
        // -------

        my_chart.update();

    }

    function subtract() {
        index = my_chart.data.datasets.length;
        new_number -= 10;
        my_chart.data.labels.push(index);
        my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
        });

        // -------
        //The below line is changing all point background colors instead of the last one only!
        my_chart.data.datasets[index - 1].pointBackgroundColor = "#bf616aff";
        // -------

        my_chart.update();
    }
    </script>
</body>

</html>

Expected Output / Objective:

When the "Add 10" button is clicked, a new point entry needs to be added with a pointBackgroundColor in green.
When the "subtract 10" button is clicked, a new point entry needs to be added with a PointBackgroundColor in red.

Current Outcome:

All point background colors are changing together instead of the last one only.

CodePudding user response：

It should be an array if you want different colors for different points in the line.

pointBackgroundColor:["#88c0d0ff"]

when you add a new dot then push the desired color in the above array.

my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
            //New dot is pushed with desired color.
            dataset.pointBackgroundColor.push("#88c0d0ff");
        });

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing Chart.js Line Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1 190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <button type="button" onclick="add()" id="btnAdd">Add 10</button>
    <button type="button" onclick="subtract()" id="btnSubtract">Subtract 10</button>
    <canvas id="chart_canvas">Your browser does not support the HTML5 canvas tag.</canvas>

    <script type="text/javascript">

    // Set Chart Global Variables
    let x_values = [];
    let y_values = [];
    let new_number = 0;
    let index = 0;
    let chart_canvas = document.getElementById("chart_canvas");
    

    // Intialize Data
    x_values.push(index);
    y_values.push(index);

    // Create New Chart
    my_chart = new Chart(chart_canvas, {
        type: "line",
        data: {
            labels: [x_values[index]],
            datasets: [{
                backgroundColor: "#d8dee980",
                pointBackgroundColor:["#88c0d0ff"],//Make it an array.
                fill: true,
                pointStyle: "circle",
                label: "Values",
                data: [y_values[index]]
            }]
        }
    });

    // ------ Local Functions ------

    function add() {
        index = my_chart.data.datasets.length;
        new_number  = 10;
        my_chart.data.labels.push(index);
        
        my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
            //New dot is pushed with desired color.
            dataset.pointBackgroundColor.push("#88c0d0ff");
        });

        // -------
        //The below line is changing all point background colors instead of the last one only!
        //my_chart.data.datasets[index - 1].pointBackgroundColor = "#88c0d0ff";
        // -------

        my_chart.update();

    }

    function subtract() {
        index = my_chart.data.datasets.length;
        new_number -= 10;
        my_chart.data.labels.push(index);
        my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
            //New dot is pushed with desired color.
            dataset.pointBackgroundColor.push("#bf616aff");
        });

        // -------
        //The below line is changing all point background colors instead of the last one only!
        //my_chart.data.datasets[index - 1].pointBackgroundColor = "#bf616aff";
        // -------

        my_chart.update();
    }
    </script>
</body>

</html>