From 75d5d5fe2c64f1815807bbea81844805c08e27c6 Mon Sep 17 00:00:00 2001
From: tarjelavik <Tarje.Lavik@ub.uib.no>
Date: Mon, 13 Sep 2021 15:09:20 +0200
Subject: [PATCH] Fix dark theme on labels
---
web/components/Sections/SingleLevelChart.js | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/web/components/Sections/SingleLevelChart.js b/web/components/Sections/SingleLevelChart.js
index 8ef8550..634634d 100644
--- a/web/components/Sections/SingleLevelChart.js
+++ b/web/components/Sections/SingleLevelChart.js
@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/react'
+import { Box, useColorModeValue } from '@chakra-ui/react'
import { ResponsivePie } from '@nivo/pie'
import Caption from './shared/caption'
@@ -13,6 +13,10 @@ export default function SingleLevelChart(props) {
return null
}
+ const theme = {
+ textColor: useColorModeValue('#222', '#fff'),
+ }
+
const { data, caption, label } = props
return (
@@ -20,15 +24,17 @@ export default function SingleLevelChart(props) {
<Box h="sm">
<ResponsivePie
data={JSON.parse(data.code)}
+ theme={theme}
margin={{ top: 10, right: 160, bottom: 10, left: 160 }}
+ startAngle={-25}
innerRadius={0.5}
padAngle={1}
cornerRadius={3}
activeOuterRadiusOffset={8}
borderWidth={1}
borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
- arcLinkLabelsSkipAngle={10}
- arcLinkLabelsTextColor="#333333"
+ arcLinkLabelsSkipAngle={8}
+ // arcLinkLabelsTextColor={labelColor}
arcLinkLabelsThickness={2}
arcLinkLabelsColor={{ from: 'color' }}
arcLabelsSkipAngle={10}
--
GitLab