Skip to content
Snippets Groups Projects
Commit bafc7d7c authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

Use the ChartJS font config in generated legends

parent b91f5cbe
No related branches found
No related tags found
1 merge request!34Rework to use a common font config across graphs and add x-axis and legends on top and bottom of graphs
...@@ -9,9 +9,9 @@ import SectionNavigation from "./SectionNavigation"; ...@@ -9,9 +9,9 @@ import SectionNavigation from "./SectionNavigation";
import { Sections } from "../helpers/constants"; import { Sections } from "../helpers/constants";
import PolicySidebar from "./PolicySidebar"; 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.family = 'Open Sans';
ChartJS.defaults.font.weight = '700'; ChartJS.defaults.font.weight = '700';
...@@ -23,7 +23,7 @@ interface inputProps { ...@@ -23,7 +23,7 @@ interface inputProps {
category: Sections category: Sections
} }
function DataPage({ title,description, filter, children, category }: inputProps): ReactElement { function DataPage({ title, description, filter, children, category }: inputProps): ReactElement {
return ( return (
<> <>
{category === Sections.Organisation && <OrganizationSidebar />} {category === Sections.Organisation && <OrganizationSidebar />}
......
import { Chart as ChartJS} from 'chart.js';
const getOrCreateLegendList = (chart, id) => { const getOrCreateLegendList = (chart, id) => {
const legendContainer = document.getElementById(id); const legendContainer = document.getElementById(id);
if (!legendContainer) { if (!legendContainer) {
...@@ -72,6 +74,9 @@ const htmlLegendPlugin = { ...@@ -72,6 +74,9 @@ const htmlLegendPlugin = {
textContainer.style.margin = '0'; textContainer.style.margin = '0';
textContainer.style.padding = '0'; textContainer.style.padding = '0';
textContainer.style.textDecoration = item.hidden ? 'line-through' : ''; 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); const text = document.createTextNode(item.text);
textContainer.appendChild(text); textContainer.appendChild(text);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment