Remove font config and add todo to fix broken x-axis on FundingSource page

webapp/src/pages/FundingSource.tsx

 import React, { useEffect, useMemo, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
-import { Col, Container, Row, Table } from "react-bootstrap";
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, Chart } from 'chart.js';
+import { Col, Container, Row } from "react-bootstrap";
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
 
 import { FundingSource, FilterSelection } from "../Schema";
 import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
@@ -10,9 +10,6 @@ import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 import ColorBadge from '../components/ColorBadge';
 
-ChartJS.defaults.font.size = 16;
-
-
 ChartJS.register(
     CategoryScale,
     LinearScale,
@@ -22,7 +19,6 @@ ChartJS.register(
     Legend
 );
 
-
 export const chartOptions = {
     maintainAspectRatio: false,
     animation: {
@@ -31,26 +27,13 @@ export const chartOptions = {
     plugins: {
         legend: {
             display: false,
-            labels: {
-                boxWidth: 20,
-                boxHeight: 30,
-                pointStyle: "rectRounded",
-                borderRadius: 6,
-                useBorderRadius: true,
-
-                },
-            },
-        },
+        }
+    },
     scales: {
         x: {
             position: 'top' as const,
             stacked: true,
             ticks: {
-                font:{
-                size: 20,
-                family: 'Open Sans, sans-serif',
-                weight: 'bold',
-                },
                 callback: (value: string | number) => {
                     if (typeof value === 'number') {
                         return `${value}%`;
@@ -58,41 +41,25 @@ export const chartOptions = {
                     return value;
                 },
             },
-
         },
+        // TODO: The ticks given here are not based on the dataset (chartJS bug?), find a fix or remove the axis
         x2: {
-            stacked: true,
             ticks: {
                 callback: (value: string | number) => {
                     if (typeof value === 'number') {
-                        return `${value}%`;
+                        return `${value * 100}%`;
                     }
                     return value;
                 },
-                font: {
-                    size: 20,
-                    family: 'Open Sans, sans-serif',
-                    weight: 'bold',
-                }
             },
             grid: {
-                display: false,
-                drawTicks: false,
-                drawBorder: false,
-            },
-            
-            min : 0,
-            max : 100
+                drawOnChartArea: false
+            }
         },
         y: {
             stacked: true,
             ticks: {
-                autoSkip: false,
-                font: {
-                    size: 20,
-                    family: 'Open Sans, sans-serif',
-                    weight: 'bold',
-                }
+                autoSkip: false
             },
         },
     },
@@ -100,28 +67,28 @@ export const chartOptions = {
 };
 
 function FundingSourceLegend() {
-    return ( 
-        <Container  className="border rounded-3 border-1 funding-chart-Legend">
-            <Row fluid className="justify-content-center "
-            style={{paddingLeft:'7vw'}}> 
+    return (
+        <Container className="border rounded-3 border-1 funding-chart-Legend">
+            <Row fluid='true' className="justify-content-center "
+                style={{ paddingLeft: '7vw' }}>
                 <Col className="d-flex align-items-center">
-                <ColorBadge key={0} index={0}/>
-                <span className='bold-14pt'>Client Institutions</span></Col>
+                    <ColorBadge key={0} index={0} />
+                    <span className='bold-14pt'>Client Institutions</span></Col>
                 <Col className="d-flex align-items-center" >
-                <ColorBadge key={1} index={1}/>
-                <span className='bold-14pt'>Commercial</span></Col>
+                    <ColorBadge key={1} index={1} />
+                    <span className='bold-14pt'>Commercial</span></Col>
                 <Col className="d-flex align-items-center" >
-                <ColorBadge key={2} index={2}/>
-                <span className='bold-14pt'>European Funding</span></Col>
+                    <ColorBadge key={2} index={2} />
+                    <span className='bold-14pt'>European Funding</span></Col>
                 <Col className="d-flex align-items-center" >
-                <ColorBadge key={3} index={3}/>
-                <span className='bold-14pt'>Gov/Public Bodies</span></Col>
+                    <ColorBadge key={3} index={3} />
+                    <span className='bold-14pt'>Gov/Public Bodies</span></Col>
                 <Col className="d-flex align-items-center" >
-                <ColorBadge key={4} index={4}/>
-                <span className='bold-14pt'>Other</span></Col>
+                    <ColorBadge key={4} index={4} />
+                    <span className='bold-14pt'>Other</span></Col>
             </Row>
-        </Container>  
-     );
+        </Container>
+    );
 }
 
 
@@ -165,25 +132,25 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
 
     const numNrens = filterSelection.selectedNrens.length;
     const numYears = filterSelection.selectedYears.length;
-    let heightPerBar = 4; // every added bar should give this much additional height
+    const heightPerBar = 4; // every added bar should give this much additional height
 
     // set a minimum height of 20rem, additional years need some more space
     const height = Math.max(numNrens * heightPerBar + (numYears * 2 * heightPerBar), 20);
     return (
-        <DataPage title="Income Source Of NRENs per Year" 
-        description='The graph shows the percentage share of their income that individual NRENs derived from different sources. 
+        <DataPage title="Income Source Of NRENs per Year"
+            description='The graph shows the percentage share of their income that individual NRENs derived from different sources. 
         On hovering over the graphs will give income share in that year.  This can be used to compare selecting multiple years to see how the 
         share has changed between the years.'
-        category={Sections.Organisation} filter={filterNode}>
+            category={Sections.Organisation} filter={filterNode}>
             <div>
-            <FundingSourceLegend/>
-            <div className="chart-container" style={{ 'height': `${height}rem` }}>
-                <Bar
-                    data={fundingSourceDataset}
-                    options={chartOptions}
-                />
-            </div>
-            <FundingSourceLegend/>
+                <FundingSourceLegend />
+                <div className="chart-container" style={{ 'height': `${height}rem` }}>
+                    <Bar
+                        data={fundingSourceDataset}
+                        options={chartOptions}
+                    />
+                </div>
+                <FundingSourceLegend />
             </div>
         </DataPage>
     );