How To Change The PointBackgroundColor Dynamically In ChartJS?

Question

 <!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.

Answer 1

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>

How To Change The PointBackgroundColor Dynamically In ChartJS?

Question

1 answers

solution1
1 ACCPTED 2022-07-18 07:53:50

How To Change The PointBackgroundColor Dynamically In ChartJS?

Question

1 answers

solution1 1 ACCPTED 2022-07-18 07:53:50

solution1
1 ACCPTED 2022-07-18 07:53:50