Let user pick the linewidth

src/components/main/routes/Dashboard.tsx

@@ -38,10 +38,15 @@ const fetchWeekForecastData = async function (dateTime, cb) {
   cb(chartData);
 };
 
-const WeatherChart = function ({ data }) {
+const WeatherChart = function ({ data, lineWidth }) {
   return (
     <LineChart width={400} height={400} data={data}>
-      <Line type="monotone" dataKey="avgtemp_c" stroke="#8884d8" />
+      <Line
+        type="monotone"
+        dataKey="avgtemp_c"
+        stroke="#8884d8"
+        strokeWidth={lineWidth}
+      />
       <Line type="monotone" dataKey="mintemp_c" stroke="#8884d8" />
       <Line type="monotone" dataKey="maxtemp_c" stroke="#8884d8" />
       <CartesianGrid stroke="#ccc" />
@@ -52,7 +57,9 @@ const WeatherChart = function ({ data }) {
 };
 
 export const Dashboard = function ({ state, updateState }) {
+  const lineWidth = path(["options", "lineWidth"], state);
   const defaultDate = path(["options", "defaultDate"], state);
+
   const minimumDate = minDate(new Date());
 
   // Make sure the default date entered by the user is bigger than the minimum date that the API allows.
@@ -89,7 +96,11 @@ export const Dashboard = function ({ state, updateState }) {
         className="flex items-center justify-center"
         style={{ minHeight: 400, minWidth: 400 }}
       >
-        {data ? <WeatherChart data={data} /> : "Loading..."}
+        {data ? (
+          <WeatherChart data={data} lineWidth={lineWidth} />
+        ) : (
+          "Loading..."
+        )}
       </div>
     </div>
   );