Context: I have a pie chart with dynamic slices (the user can add as many slices as they please) and I'd like to keep the last pie slice (called Loss) as red (this pie slice would essentially be the last index).
var data = new google.visualization.DataTable();
data.addColumn("string", "Ativo");
data.addColumn("number", "Quota");
data.addRows([
...slices.map((slice) => [slice.ativo, slice.quota]),
["Loss", perda],
]);
console.log(data);
//Styling
let options = {
legend: "right",
pieHole: 0.5,
legend: { textStyle: { color: "gray" } },
pieSliceText: "value",
slices: {
0: { color: "red" }, //I want this to pass the last index dynamically (as the user addes new elements, it updates to be the last index). As of now, this will give color red to the 1st element
},
colors: ["#728FCE", "#FBB117", "#6AA121", "#4863A0", "#7D0552", "#FF0000"],
backgroundColor: "#22252a",
chartArea: {
left: 50,
right: 50,
top: 70,
},
width: "100%",
height: "500px",
};
var chart = new google.visualization.PieChart(
document.getElementById("piechart")
);
chart.draw(data, options);
}
I've tried this SO: Google Visualization - Set Pie Chart Slice Color, but no success.
I would basically want to change the slices object inside the options variable so that it would be something like this
slices: {
data[data.lenght-1]: {color:"red"}
}
but this doesn't work. It seems as if it only accepts 0,1,2,3, etc. I've tried creating the number of elements added by the user, saving that as a variable and then pass that variable onto the slices object to set the color (so if the user added 2 elements, the variable would have integers from 0,1 and 2 and the last value (2) would server as index to be set as color red), but no success.
Or somehow fix the Loss row as being color red
Any help?
Thanks