Is it feasible to include an extra label on every column chart bar without affecting the appearance of the bar itself?
This is how my current chart is arranged:
this.populationChart.myChartObject.data = {
'cols': [
{ id: 's', label: 'Stage', type: 'string' },
{ id: 'v', label: 'Value', type: 'number' },
{ id: 'p', label: 'Percent', type: 'number' },
{ role: 'style', type: 'string' }
], 'rows': [
// data rows here
]
};
calcPercent = (numerator: number, denominator: number): number => {
if (denominator === 0) {
return 0;
};
if (denominator !== 0) {
return (Math.round((numerator / denominator) * 100));
};
};
Currently, each stage shows two bars - one for the value label and one for the percentage label.
What I am aiming for is to have each bar's height determined by the value label. When hovering over a bar, I want the popup to display the value label and its value, as well as the percentage label.
In essence, I wish for the bar's visual representation to be based solely on the value label, while both labels are shown when moused over. Is this achievable?