Describe the bug
As activeEntries does not seem to work as per #1162, I'd like to find an alternative to differentiate the style of a single bar in my vertical bar chart.
I tried with setting the customColors property on selection, but I could not get very far with this approach (see stackblitz linked below).
Any help or suggestion would be very much appreciated. Ah, and many thanks for this project ;)
To Reproduce
Please, refer to the link in the Demo section below.
Expected behavior
The possibility to change the color of a selected bar.
Demo
https://stackblitz.com/edit/vertical-bar-chart-atxxvq
ngx-charts version
^16.0.0
Additional context
So far, I was able to change the color but it change it for all the bars regardless of my switch case statement that should change it only for 'Germany' when its bar is clicked.
I made it!
The working solution is in the same stackblitz example that I post here as well for convenience:
https://stackblitz.com/edit/vertical-bar-chart-atxxvq
For anyone facing the same issue, here is what I did:
html
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[customColors]="customColors"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>
ts (only relevant part
export class AppComponent {
single: any[];
multi: any[];
view: any[] = [700, 400];
// options
showXAxis = true;ts
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme = {
domain: ['#003c88']
};
customColors: any;
constructor() {
Object.assign(this, { single })
}
onSelect(event: any) {
this.customColors = [
{
name: event.name,
value: '#ff0000'
}
];
}
}
Most helpful comment
I made it!
The working solution is in the same stackblitz example that I post here as well for convenience:
https://stackblitz.com/edit/vertical-bar-chart-atxxvq
For anyone facing the same issue, here is what I did:
html
ts (only relevant part