CODEWITHSUNDEEP
angulartypescriptchart.jsangular7
Yash
Yash

Reputation: 199

Angular: How to change color of chartjs?

I want to change color of my chart, but I'm unable to do so. Any help will be immensely appreciated.

I have tried providing color values to datasets but it doesnt seem to work.

My html template

  <div style="display: block">
    <canvas style="position: relative; height:140vh; width:80vw;" baseChart [datasets]="barChartData"
      [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType">

    </canvas>
  </div>
</div>

My component file 

public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,

  };
  public barChartLabels = [];
  public barChartType = 'bar';
  public barChartLegend = true;
  public barChartData: any = [{
    data: [],
    label: ''
  }];
  pageNo: number = 1;
  moviedata = [];
  datasets: [
    {

      borderColor: '#3cba9f',
      fill: false
    }
  ]

I want to change the color of my bar, border color and text. Thanks in advance!.

Upvotes: 1

Views: 1491

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

The colors etc can be set inside the dataset, along with the data... like: public barChartData: ChartDataSets[] = [{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'}, {...} }

relevant TS with styling is:

 public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [pluginDataLabels];

  public barChartData: ChartDataSets[] = [
    {
      data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'
      , backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'
    },
    {
      data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'
      , backgroundColor: 'lightblue', hoverBorderColor: 'blue', borderColor: '#000'
    }
  ];

relevant HTML is:

<div style="display: block">
  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

you can check a working demo here

Upvotes: 2

Related Questions