Everything is looking great on my chart with the labels perfectly displayed at the defined font size. However, I am facing an issue when viewing the chart in higher resolutions as the font sizes appear small. Is there a way to dynamically adjust all size-related configurations so that the chart works well on monitors with different resolutions?
**STEP1: In my angular component(.html), I defined the chart as follows:**
<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: I configured the chart font settings (lineChartOptions) in the constructor of the component(*.ts):
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
}
The above steps illustrate how I am currently setting up the chart.
My concern: Despite trying to change the devicePixelRatio of the chart, the font sizes remain small in higher resolutions. How can I ensure that the font size scales appropriately for all resolution displays?
Here are examples in two resolutions: Normal Resolution: https://i.stack.imgur.com/8teGy.png
Higher Resolution: https://i.stack.imgur.com/S4vVX.png
Even when viewed at 100%, the font size of data labels does not scale accordingly.