title: Change font size and font color in Chartjs Angular 5
body: <p>Font color in chartjs is light gray, then when you want to print from page,  it does not appear.</p>
  
  <p>I change the font color of chartjs in options attribute, but it does not work.</p>
  
  <p>How can I change the font color in chartjs angular</p>
  
  <pre><code>public options:any = {
  
      legend: {
              labels: {
                  // This more specific font property overrides the global property
                  fontColor: 'red',
                  fontSize: '30'
              }
          }
    };
  </code></pre>
  
  <p>in template :</p>
  
  <pre><code>&lt;canvas baseChart
                  height=100                
                  [datasets]="barChartData"
                  [labels]="barChartLabels"
                  [options]="barChartOptions"
                  [legend]="barChartLegend"
                  [colors]="chartColors"
                  [chartType]="barChartType"
                  [options]="options"
                  &gt;
          &lt;/canvas&gt;
  </code></pre>
  
  <p>I use chartjs like following in ts file.</p>
  
  <p>This is my complete ts file:</p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  
  import { Test } from './models/test.model';
  
  @Component({
    selector: 'app-customer-report-test',
    templateUrl: './customer-report-test.component.html',
    styleUrls: ['./customer-report-test.component.css']
  })
  export class CustomerReportTestComponent implements OnInit {
  
    @Input('test') test: Test = new Test();
  
    public barChartOptions:any = {
      scaleShowVerticalLines: false,
      responsive: true
    };
    public barChartLabels:string[];
    public barChartType:string = 'bar';
    public barChartLegend:boolean = true;
  
    public barChartData:any[];
    backgroundColorList: string[];
    public chartColors: any[] = [
        {
          backgroundColor: this.backgroundColorList
        }];
  
  
    public options:any;
  
    constructor() { }
    //----------------------------------------------------------------------------
    ngOnInit() {
  
      //set Label
      this.barChartLabels = [];
      for(let i=1; i&lt;= this.test.data_array.length; i++){
        this.barChartLabels.push('' + i);
      }
      //set data chart
      this.barChartData = [{data: this.test.data_array, label: this.test.test_type[1]}]
      this.test.test_type[1]}, {data: [20,20, 20, 20],type: "line",label: ['0', '1', '2', '3'] ,fill:'none'}]
  
      // set color to line according to state_array
      this.backgroundColorList = [];
      if(this.test.state_array.length != 0){
  
        for(let i=0; i&lt;this.test.data_array.length; i++){
          if(this.test.state_array[i] == 0){
            this.backgroundColorList.push('#069ed6');
          }else if(this.test.state_array[i] == 1){
            this.backgroundColorList.push('#F5482D');
          }else if(this.test.state_array[i] == 2){
            this.backgroundColorList.push('#CAC409');
          }
        }
     }
      else{
        for(let d of this.test.data_array){
          this.backgroundColorList.push('#069ed6');
        }
      }
  
      this.chartColors = [
          {
            backgroundColor: this.backgroundColorList
          }];
  
      this.options = {
        responsive: true,
        title: {
                display: true,
                text: 'Custom Chart Title'
            },
  
            legend: {
                    display: true,
                    labels: {
                        fontColor: 'red'
                    }
                }
  
      };
    }
  }
  </code></pre>