From bafc7d7c594c3b80a7279e8ef76470862ea99472 Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Wed, 24 May 2023 16:50:03 +0200
Subject: [PATCH] Use the ChartJS font config in generated legends

---
 webapp/src/components/DataPage.tsx     | 6 +++---
 webapp/src/plugins/HTMLLegendPlugin.ts | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/DataPage.tsx b/webapp/src/components/DataPage.tsx
index 04619c32..166c6710 100644
--- a/webapp/src/components/DataPage.tsx
+++ b/webapp/src/components/DataPage.tsx
@@ -9,9 +9,9 @@ import SectionNavigation from "./SectionNavigation";
 import { Sections } from "../helpers/constants";
 import PolicySidebar from "./PolicySidebar";
 
-import { Chart as ChartJS} from 'chart.js';
+import { Chart as ChartJS } from 'chart.js';
 
-ChartJS.defaults.font.size = 18;
+ChartJS.defaults.font.size = 16;
 ChartJS.defaults.font.family = 'Open Sans';
 ChartJS.defaults.font.weight = '700';
 
@@ -23,7 +23,7 @@ interface inputProps {
     category: Sections
 }
 
-function DataPage({ title,description, filter, children, category }: inputProps): ReactElement {
+function DataPage({ title, description, filter, children, category }: inputProps): ReactElement {
     return (
         <>
             {category === Sections.Organisation && <OrganizationSidebar />}
diff --git a/webapp/src/plugins/HTMLLegendPlugin.ts b/webapp/src/plugins/HTMLLegendPlugin.ts
index 909ca5d5..04ea7f75 100644
--- a/webapp/src/plugins/HTMLLegendPlugin.ts
+++ b/webapp/src/plugins/HTMLLegendPlugin.ts
@@ -1,3 +1,5 @@
+import { Chart as ChartJS} from 'chart.js';
+
 const getOrCreateLegendList = (chart, id) => {
     const legendContainer = document.getElementById(id);
     if (!legendContainer) {
@@ -72,6 +74,9 @@ const htmlLegendPlugin = {
                 textContainer.style.margin = '0';
                 textContainer.style.padding = '0';
                 textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+                textContainer.style.fontSize = `${ChartJS.defaults.font.size}px`;
+                textContainer.style.fontFamily = `${ChartJS.defaults.font.family}`;
+                textContainer.style.fontWeight = `${ChartJS.defaults.font.weight}`;
 
                 const text = document.createTextNode(item.text);
                 textContainer.appendChild(text);
-- 
GitLab