diff --git a/package-lock.json b/package-lock.json
index 1613fca..bea230c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -562,6 +562,11 @@
       "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
       "dev": true
     },
+    "frappe-charts": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/frappe-charts/-/frappe-charts-1.6.2.tgz",
+      "integrity": "sha512-9TC3/+YVUi84yYoEbxFiSqu+1FQ5If/ydUNj6i8FRpwynd08t6a7RkS+IRJozAk6NfdL8/LVTTE1DUOjjKZZxg=="
+    },
     "fs-extra": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
@@ -1497,8 +1502,16 @@
     "svelte": {
       "version": "3.44.2",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.2.tgz",
-      "integrity": "sha512-jrZhZtmH3ZMweXg1Q15onb8QlWD+a5T5Oca4C1jYvSURp2oD35h4A5TV6t6MEa93K4LlX6BkafZPdQoFjw/ylA==",
-      "dev": true
+      "integrity": "sha512-jrZhZtmH3ZMweXg1Q15onb8QlWD+a5T5Oca4C1jYvSURp2oD35h4A5TV6t6MEa93K4LlX6BkafZPdQoFjw/ylA=="
+    },
+    "svelte-frappe-charts": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/svelte-frappe-charts/-/svelte-frappe-charts-1.9.1.tgz",
+      "integrity": "sha512-cp2Sv+EXxdH5nIJ9I6ant9XP73Sc8CGXLzb0h8vpV0viH+zCCE+CEmo/cOiWL4JWNZrxRJ5UBdDGVk5nnORyKA==",
+      "requires": {
+        "frappe-charts": "^1.6.2",
+        "svelte": "^3.44.0"
+      }
     },
     "svelte-preprocess": {
       "version": "4.9.8",
diff --git a/package.json b/package.json
index a2cd463..0d914f2 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "daisyui": "^1.16.4",
-    "sirv-cli": "^1.0.14"
+    "sirv-cli": "^1.0.14",
+    "svelte-frappe-charts": "^1.9.1"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
index b7a292b..b70c118 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,12 +5,12 @@
   router.mode.hash(); // enables hash navigation method
   //router.mode.memory(); // enables in-memory navigation method
 
-  //import Chart from "svelte-frappe-charts";
-
   import Card from "./widgets/Card.svelte";
   import Input from "./widgets/Input.svelte";
   import Toggle from "./widgets/Toggle.svelte";
   import Anydata from "./widgets/Anydata.svelte";
+  //import Modal from "svelte-simple-modal";
+  import Chart from "svelte-frappe-charts";
 
   //==================================constants section========================================
   let debug = true;
@@ -135,6 +135,15 @@
     },
   ];
 
+  let datachart = {
+    labels: ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"],
+    datasets: [
+      {
+        values: [10, 12, 3, 9, 8, 15, 9],
+      },
+    ],
+  };
+
   let widgetCollection = {};
 
   widgetCollection = {
@@ -685,7 +694,9 @@
         </Card>
       </Route>
       <Route path="/about">
-        <Card title={"Список устройств"} />
+        <Card title={"Пример графика"}>
+          <Chart data={datachart} type="line" />
+        </Card>
       </Route>
     </div>
   </ul>