From 45790d7fe3f9a8e10f8d8620f8078356ea1b122c Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sun, 8 May 2022 14:00:11 -0700
Subject: White background for chart

---
 modern/src/reports/components/Graph.js | 36 ++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 13 deletions(-)

(limited to 'modern/src/reports/components')

diff --git a/modern/src/reports/components/Graph.js b/modern/src/reports/components/Graph.js
index 63d24eee..6620b3d0 100644
--- a/modern/src/reports/components/Graph.js
+++ b/modern/src/reports/components/Graph.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withWidth } from '@material-ui/core';
+import { withWidth, makeStyles } from '@material-ui/core';
 import {
   LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
 } from 'recharts';
@@ -17,17 +17,27 @@ const CustomizedAxisTick = ({ x, y, payload }) => {
   );
 };
 
-const Graph = ({ type, items }) => (
-  <ResponsiveContainer height={400} width="100%" debounce={1}>
-    <LineChart data={items}>
-      <XAxis dataKey="fixTime" tick={<CustomizedAxisTick />} height={60} />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line type="natural" dataKey={type} />
-    </LineChart>
-  </ResponsiveContainer>
-);
+const useStyles = makeStyles((theme) => ({
+  chart: {
+    backgroundColor: theme.palette.colors.white,
+  },
+}));
+
+const Graph = ({ type, items }) => {
+  const classes = useStyles();
+  
+  return (
+    <ResponsiveContainer height={400} width="100%" debounce={1} className={classes.chart}>
+      <LineChart data={items}>
+        <XAxis dataKey="fixTime" tick={<CustomizedAxisTick />} height={60} />
+        <YAxis />
+        <CartesianGrid strokeDasharray="3 3" />
+        <Tooltip />
+        <Legend />
+        <Line type="natural" dataKey={type} />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+};
 
 export default withWidth()(Graph);
-- 
cgit v1.2.3