Issue
<!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
pointBackgroundColorin green. - When the "subtract 10" button is clicked, a new point entry needs to be added with a
PointBackgroundColorin red.
Current Outcome:
All point background colors are changing together instead of the last one only.
Solution
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>Answered By - poo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.