I need to implement this code exactly using it. Here is my code example:
barChartOptions: ChartOptions = {
responsive: true,
};
barChartColors: Color[] = [
{
backgroundColor: 'forestgreen',
borderColor: 'white',
borderWidth: 3
}, {
backgroundColor: 'red',
borderColor: 'white',
borderWidth: 3
}];
barChartLabels: Label[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
'16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];
barChartType: ChartType = 'bar';
barChartLegend = false;
barChartPlugins = [];
barChartData: ChartDataSets[] = [
{
data: [11, 12, 12, 14, 14, 19, 22, 28, 29, -30, 31, 31, 35, 35, 35, -37, 37, 40, 40, 41, 45, 45, 48, 51, 57,
62, 65, 69, 69, 71, 75]
}
];
This is my HTML side of the code but it is not working:
<div class="chart-wrapper" style="width: 100%">
<canvas baseChart
[colors]="barChartData>0 ? barChartColors[0] : barChartColors[1]"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
[colors]="barChartData>0 ? barChartColors[0] : barChartColors[1]" this row gave me this mistake:
Also, compiler give me to this:
Operator '>' cannot be applied to types 'ChartDataSets[]' and 'number'.[colors]="barChartData>0 ? barChartColors['forestgreen'] : barChartColors['red']"
Could you help me for this problem?
barChartData is an array of ChartDataSets that contains a single element. Therefore, to make it work, you could change your code as follows:
[colors]="barChartData[0].data.map(v => v > 0 ? barChartColors[0] : barChartColors[1])"
or more compact...
[colors]="barChartData[0].data.map(v => barChartColors[v > 0 ? 0 : 1])"
This code uses
Array.map(), on thedataarray insideChartDataSets. It returns a newarraywith the appropriate color for each value.