CODEWITHSUNDEEP
angularchartschart.jsresolutionng2-charts
OmGanesh
OmGanesh

Reputation: 1062

Chart.js Increase font size for higher resolution (i.e. monitor-agnostic chart configuration )

My chart is showing its labels (AxesLabels, DataLabels) perfectly with the defined fontSize which is passed to the config of the graph in normal resolution (1920*180).

**STEP1: Defined the chart in my angular component(.html) as:**
<div class="chartStyle">
      <canvas #canvas baseChart id="myChart"
        [datasets]="lineChartData"
        [chartType]="lineChartType"
        [labels]="lineChartLabels"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [options]="lineChartOptions"
        (chartClick)="chartClicked($event)"></canvas>
    </div>

STEP2: Set the chart font configuration (i.e. lineChartOptions) from the component(*.ts) constructor:

export class MyChartComponent {
  
  public lineChartType: string;
  public lineChartLegend: false;
  public lineChartOptions: any;
  public lineChartPlugins: any;
  //similarly other configs are done

constructor() {
    this.setInitialChartData();
  }

private setInitialChartData(): void {

    this.lineChartType = 'line';
    this.lineChartLegend = true;
    this.lineChartData = [
      { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
    ];
    this.lineChartLabels = ['January', 'February', 'March', 'April', 'May', 'June'];
    this.lineChartOptions = {
      responsive: 'true',
      plugins: {
        datalabels: {
          align: 'top',
          color: 'black',
          font: {
            size: 14,
            weight: 600
          }
        }
      };
 //other methods unrelated

}

Above steps show how I am drawing the chart currently.

My issue is: When I view the same chart is higher resolution, the font sizes are pretty small. So, How can I set all the size related configuration dynamically so that the chart works good for all resolution monitors.

I tried changing the devicePixelRatio of the chart, but sadly it doesn't work.

Here are the sample on two resolutions: Normal Resolution: 1920 by 1080 resolution chart

Higher Resolution: 3840 by 2160 resolution chart

Don't be confuse, even if I view this chart in 100%, the font size of data labels doesn't scale.

Upvotes: 0

Views: 696

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

Before you call new Chart(), you can set the default fontSize Chart.defaults.global.defaultFontSize = fontSize;, default its 10.

If you get the width and height you can check the resolution and adjust the fontsize based on that.

Upvotes: 1

Related Questions