Create a representation of tracked untracked % on bars
public barChartData: ChartConfiguration<'bar'>['data'] = {
labels: [],
datasets: [{
data: [],
label: 'Cost (USD)',
backgroundColor: [
'#4e73df', '#1cc88a', '#36b9cc', '#f6c23e',
'#e74a3b', '#858796', '#6f42c1', '#fd7e14'
],
borderColor: '#fff',
borderWidth: 1,
borderRadius: 4,
borderSkipped: false
}]
};
public barChartOptions: ChartConfiguration<'bar'>['options'] = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleFont: {
size: 16,
weight: 'bold',
family: 'Arial'
},
bodyFont: {
size: 16,
weight: 'normal',
family: 'Arial'
},
footerFont: {
size: 14,
weight: 'normal',
family: 'Arial'
},
callbacks: {
label: context => this.tooltipLabelCallback(context) // UPDATED
}
}
},
scales: {
x: {
title: {
display: true,
text: 'Category Major',
color: '#333',
font: {
size: 18,
weight: 'bold'
}
},
ticks: {
color: '#5a5c69',
font: {
size: 18,
weight: 'bold'
}
}
},
y: {
title: {
display: true,
text: 'Total Cost (USD)',
color: '#333',
font: {
size: 22,
weight: 'bold'
}
},
ticks: {
color: '#5a5c69',
font: {
size: 18,
weight: 'bold'
},
callback: (value) => `$${Number(value).toLocaleString()}`
}
}
}
};