i'm trying to change the color of a slice of pie chart that's already renderized.
I have a viable with all the info, Data, label, color, percent and everything.
now i want to make a input or whatever to change the slice color in chart.js
This is my raw code
<body>
<div style="display: inline-block;" class="areagraph"></div>//just filled by js with the elements
</body>
<script>
const allCharts = [
{
name: "Gender",
type: "pie",
data: [
{ label: "Homem Trans", backgroundColor: "#213C64", data: 434, total: 2000, percentage:14.5 }
`Other Genders`
]
];
allCharts.forEach(chart => {
const containerchart = document.createElement('div');
containerchart.classList.add('containerchart');
const dataContainer = document.createElement('div');
dataContainer.classList.add('data-table');
const title = document.createElement('h1');
title.textContent = chart.name + " in " + chart.type;
const canvascontainerchart = document.createElement('div');
canvascontainerchart.classList.add('graphContainer');
const canvas = document.createElement('canvas');
canvas.id = 'pie-chart-' + chart.name.toLowerCase().replace(/\s/g, '-');
canvascontainerchart.appendChild(canvas);
const table = document.createElement('table');
table.classList.add('table', 'table-bordered', 'table-hover');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');
const theadRow = document.createElement('tr');
const thColor = document.createElement('th');
thColor.textContent = 'Cor'; // Nome da coluna de cor
const thName = document.createElement('th');
thName.textContent = chart.name;
const thNumber = document.createElement('th');
thNumber.textContent = 'Number';
const thPercentage = document.createElement('th');
thPercentage.textContent = 'Percentage';
theadRow.appendChild(thColor);
theadRow.appendChild(thName);
theadRow.appendChild(thNumber);
theadRow.appendChild(thPercentage);
thead.appendChild(theadRow);
chart.data.forEach(item => {
const tbodyRow = document.createElement('tr');
const tdColor = document.createElement('td');
const colorDiv = document.createElement('div');
colorDiv.style.width = '20px'; // Largura da div redonda
colorDiv.style.height = '20px'; // Altura da div redonda
colorDiv.style.borderRadius = '50%'; // Forma redonda
colorDiv.style.backgroundColor = item.backgroundColor; // Cor de fundo correspondente
tdColor.appendChild(colorDiv);
const tdName = document.createElement('td');
tdName.textContent = item.label;
const tdNumber = document.createElement('td');
tdNumber.textContent = item.data;
const tdPercentage = document.createElement('td');
const percentage = item.percentage;
tdPercentage.textContent = percentage + '%';
tbodyRow.appendChild(tdColor);
tbodyRow.appendChild(tdName);
tbodyRow.appendChild(tdNumber);
tbodyRow.appendChild(tdPercentage);
tbody.appendChild(tbodyRow);
});
table.appendChild(thead);
table.appendChild(tbody);
dataContainer.appendChild(table);
/* Graph */
containerchart.appendChild(canvascontainerchart);
/* Table */
containerchart.appendChild(dataContainer);
const areagraphDiv = document.querySelector('.areagraph');
areagraphDiv.appendChild(containerchart);
// document.body.appendChild(containerchart);
new Chart(canvas, {
type: chart.type,
data: {
labels: chart.data.map(item => item.label),
datasets: [{
backgroundColor: chart.data.map(item => item.backgroundColor),
data: chart.data.map(item => item.percentage), // Use the raw percentage values
}],
},
options: {
plugins: {
title: {
text: chart.name,
display: true,
fullSize: true,
font: {
size: 30,
},
},
tooltip: {
callbacks: {
label: (percentage) => {
return percentage.value + "%"; // Append "%" to the tooltip label
},
},
},
},
responsive: true,
},
});
</script>
Well, this show how im doing the job. pick color from propety backgroundColor.