Fix typing issue with theme info

Author: microbit-matt-hillsdon

src/components/LiveGraph.tsx

@@ -4,7 +4,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, useTheme } from "@chakra-ui/react";
+import { Box, useToken } from "@chakra-ui/react";
 import { useSize } from "@chakra-ui/react-use-size";
 import { AccelerometerDataEvent } from "@microbit/microbit-connection";
 import { useCallback, useEffect, useRef } from "react";
@@ -345,8 +345,7 @@ const LiveGraph = () => {
   const [{ graphColorScheme, graphLineScheme, graphLineWeight }] =
     useSettings();
 
-  const theme = useTheme();
-  const fontFamily: string = theme.fonts?.body ?? "sans-serif";
+  const [fontFamily] = useToken("fonts", ["body"]);
   const colors = useGraphColors(graphColorScheme);
   const lineStyles = useGraphLineStyles(graphLineScheme);
   const canvasRef = useRef<HTMLCanvasElement>(null);