updated and add bar chart example and readme

README.md

@@ -1,2 +1,16 @@
 # Chart.js Demos
-- Line Chart Example
+
+**Install**
+
+Using NPM
+```shell
+npm install @cubetiq/react-chart-js
+```
+
+OR using Yarn
+```shell
+yarn add @cubetiq/react-chart-js
+```
+
+- Line Chart Example
+- Bar Chart Example

src/demos/BarChart/BarChartExample.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ReactChartJs } from '@cubetiq/react-chart-js';
+
+function BarChartExample(props: any) {
+    const { chartConfig } = props
+
+    return (
+        <ReactChartJs
+            chartConfig={chartConfig}
+        />
+    );
+}
+
+export default BarChartExample;

src/demos/BarChart/index.ts

@@ -0,0 +1 @@
+export { default as BarChart } from './BarChartExample'

src/demos/ChartProps.d.ts

@@ -0,0 +1,3 @@
+export interface ChartProps {
+  chartConfig?: object;
+}

src/stories/BarChartDemo.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { ChartProps } from "../demos/ChartProps";
+import { LineChart } from "../demos/LineChart";
+import "./chart.css";
+
+/**
+ * Primary UI component for user interaction
+ */
+export const BarChartDemo: React.FC<ChartProps> = ({
+  chartConfig = {
+    type: "bar",
+    options: {
+      responsive: true,
+      title: {
+        display: true,
+        text: "Monthly Payments",
+      },
+      tooltips: {
+        mode: "index",
+        intersect: false,
+      },
+      hover: {
+        mode: "nearest",
+        intersect: true,
+      },
+      scales: {
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero: true,
+            },
+          },
+        ],
+      },
+    },
+    data: {
+      datasets: [
+        {
+          label: "Part-time",
+          data: [5, 10, 30],
+          fill: false,
+          borderColor: [
+            "rgba(255, 99, 132, 1)",
+            "rgba(54, 162, 235, 1)",
+            "rgba(255, 206, 86, 1)",
+          ],
+          backgroundColor: [
+            "rgba(255, 99, 132, 0.2)",
+            "rgba(54, 162, 235, 0.2)",
+            "rgba(255, 206, 86, 0.2)",
+          ],
+          borderWidth: 1,
+        },
+        {
+          label: "Full-time",
+          data: [10, 15, 45],
+          fill: false,
+          borderColor: [
+            "rgba(75, 192, 192, 1)",
+            "rgba(153, 102, 255, 1)",
+            "rgba(255, 159, 64, 1)",
+          ],
+          backgroundColor: [
+            "rgba(75, 192, 192, 0.2)",
+            "rgba(153, 102, 255, 0.2)",
+            "rgba(255, 159, 64, 0.2)",
+          ],
+          borderWidth: 1,
+        },
+      ],
+      labels: ["Jan", "Feb", "Mar"],
+    },
+  },
+  ...props
+}) => {
+  return <LineChart chartConfig={chartConfig} />;
+};

src/stories/Chart.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Story, Meta } from "@storybook/react/types-6-0";
 
-import { LineChartDemo, ChartProps } from "./LineChartDemo";
+import { LineChartDemo } from "./LineChartDemo";
+import { BarChartDemo } from "./BarChartDemo";
+import { ChartProps } from "../demos/ChartProps";
 
 export default {
   title: "Example/Chart",
@@ -9,7 +11,12 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<ChartProps> = (args) => <LineChartDemo />;
+const LineChartDemoTemplate: Story<ChartProps> = (args) => <LineChartDemo />;
 
-export const LineChart = Template.bind({});
-LineChart.args = {};
+const BarChartDemoTemplate: Story<ChartProps> = (args) => <BarChartDemo />;
+
+export const LineChart = LineChartDemoTemplate.bind({});
+LineChart.args = { };
+
+export const BarChart = BarChartDemoTemplate.bind({});
+BarChart.args = { };

src/stories/LineChartDemo.tsx

@@ -1,11 +1,8 @@
 import React from "react";
+import { ChartProps } from "../demos/ChartProps";
 import { LineChart } from "../demos/LineChart";
 import "./chart.css";
 
-export interface ChartProps {
-  chartConfig?: any;
-}
-
 /**
  * Primary UI component for user interaction
  */