[FIX] ChartRuntime: take devicePixelRatio in account

src/components/figures/chart/chartJs/chartjs.ts

@@ -55,6 +55,13 @@ export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
         this.currentRuntime = runtime;
       }
     });
+    useEffect(
+      () => {
+        this.currentRuntime = this.chartRuntime;
+        this.updateChartJs(deepCopy(this.currentRuntime));
+      },
+      () => [window.devicePixelRatio]
+    );
   }
 
   private createChart(chartData: ChartConfiguration) {

src/components/figures/chart/gauge/gauge_chart_component.ts

@@ -21,7 +21,7 @@ export class GaugeChartComponent extends Component<Props, SpreadsheetChildEnv> {
       () => {
         const canvas = this.canvas.el as HTMLCanvasElement;
         const rect = canvas.getBoundingClientRect();
-        return [rect.width, rect.height, this.runtime, this.canvas.el];
+        return [rect.width, rect.height, this.runtime, this.canvas.el, window.devicePixelRatio];
       }
     );
   }

src/components/figures/chart/scorecard/chart_scorecard.ts

@@ -30,7 +30,7 @@ export class ScorecardChart extends Component<Props, SpreadsheetChildEnv> {
     useEffect(this.createChart.bind(this), () => {
       const canvas = this.canvas.el as HTMLCanvasElement;
       const rect = canvas.getBoundingClientRect();
-      return [rect.width, rect.height, this.runtime, this.canvas.el];
+      return [rect.width, rect.height, this.runtime, this.canvas.el, window.devicePixelRatio];
     });
   }
 

src/helpers/figures/charts/gauge_chart_rendering.ts

@@ -73,9 +73,11 @@ interface Segment {
 
 export function drawGaugeChart(canvas: HTMLCanvasElement, runtime: GaugeChartRuntime) {
   const canvasBoundingRect = canvas.getBoundingClientRect();
-  canvas.width = canvasBoundingRect.width;
-  canvas.height = canvasBoundingRect.height;
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = dpr * canvasBoundingRect.width;
+  canvas.height = dpr * canvasBoundingRect.height;
   const ctx = canvas.getContext("2d")!;
+  ctx.scale(dpr, dpr);
 
   const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
   drawBackground(ctx, config);

src/helpers/figures/charts/scorecard_chart.ts

@@ -294,9 +294,12 @@ export class ScorecardChart extends AbstractChart {
 
 export function drawScoreChart(structure: ScorecardChartConfig, canvas: HTMLCanvasElement) {
   const ctx = canvas.getContext("2d")!;
-  canvas.width = structure.canvas.width;
-  const availableWidth = canvas.width - DEFAULT_CHART_PADDING;
-  canvas.height = structure.canvas.height;
+  const dpr = window.devicePixelRatio || 1;
+
+  canvas.width = dpr * structure.canvas.width;
+  canvas.height = dpr * structure.canvas.height;
+  ctx.scale(dpr, dpr);
+  const availableWidth = structure.canvas.width - DEFAULT_CHART_PADDING;
 
   ctx.fillStyle = structure.canvas.backgroundColor;
   ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);