add example for react line chart example

2020-10-15 09:01:55 +07:00
parent fdacd18b92
commit b6a0d9ca50
20 changed files with 554 additions and 64 deletions
--- a/examples/line-chart-example/src/LineChartExample.tsx
+++ b/examples/line-chart-example/src/LineChartExample.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ReactChartJs } from '@cubetiq/react-chart-js';
+
+function LineChartExample(props) {
+    return (
+        <ReactChartJs
+            chartConfig={{
+                type: 'line',
+                options: {
+                    responsive: true,
+                    title: {
+                        display: true,
+                        text: 'Monthly Payments',
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                    hover: {
+                        mode: 'nearest',
+                        intersect: true,
+                    },
+                },
+                data: {
+                    datasets: [
+                        {
+                            label: 'Part-time',
+                            data: [5, 10, 30],
+                            fill: false,
+                            borderColor: '#ff6384',
+                        },
+                        {
+                            label: 'Full-time',
+                            data: [10, 15, 45],
+                            fill: false,
+                            borderColor: '#36a2eb',
+                        },
+                    ],
+                    labels: ['Jan', 'Feb', 'Mar'],
+                },
+            }}
+        />
+    );
+}
+
+export default LineChartExample;