Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

245
Views
Cannot change the color of column chart according to its value

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:

  1. Type Color is not assignable to type Color[]
  2. DashboardComponent.barChartData: ChartDataSets[]
  3. DashboardComponent.barChartColors: Color[]

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?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 the data array inside ChartDataSets. It returns a new array with the appropriate color for each value.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!