Change graphics colors with chartjs

Asked

Viewed 119 times

0

Guys, I’m using Chartjs to create a Dashboard and I wanted to change the colors of the graphics. I found the Patternomaly library that assists in these changes, but I am not knowing how to import in an angular project. What would be the best alternative to change the colors? already tried with backgroundColor making a databinding but does not recognize backgroungColor as a property.

My div:

<div class="row">
    <section class="col l5 m12 s12 center-align">
      <h3>Registros de {{ date | date: 'yyyy'}}</h3>
      <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
        [plugins]="barChartPlugins" [legend]="barChartLegend" [chartType]="barChartType" >
      </canvas>
    </section>
    <div class="col l2">
      <div class="">

My file Dashboard.component.ts

  //CHARTYPE BAR
  barChartLabels: Label[] = ['Cadastrados com sucesso', 'Cadastros incompletos'];
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];

  barChartData: ChartDataSets[] = [
    { data: [45, 37, 60, 70, 46, 33], label: 'Solicitações' }
  ];

1 answer

1


Looking in the library, I understood how you would do it. Within the Chartdatasets variable declaration itself:

barChartLabels: Label[] = ['Cadastrados com sucesso', 'Cadastros incompletos'];
barChartData: ChartDataSets[] = [
    { 
     data: [45, 37, 60, 70, 46, 33], 
     label: 'Solicitações', 
     backgroundColor : ['#00BCD4', '#FF5252'] }
  ];

Browser other questions tagged

You are not signed in. Login or sign up in order to post.