PLOTTING GRAPHS WITH CHARTS

 TO DISPLAY IN THE FORM OF A CHART WE USE THE PACKAGE react-chartjs-2

TO INSTALL IT WE FOLLOW THE COMMAND: npm i chart.js react-chartjs-2

WE FOLLOW THE GUIDELINES PROVIDED ,

WE CLICK ON EXAMPLES AND SELECT OUR REQUIRED GRAPH,

 LET'S TAKE VERTICAL GRAPH FOR EXAMPLE, A WINDOW IS DISPLAYED(LIKE A TERMINAL) WHICH CONSISTS OF VARIOUS FILES, IN WHICH SELECT APP.TSX (TYPE SCRIPT FILE) COPY AND PASTE THIS CODE IN OUR FILE AS PER YOUR REQUIREMENTS.

TO DISPLAY HOLDINGS WE ARE GOING TO USE, AREA GRAPH.

WE COPY THE CODE FROM THE GUIDELINES, AND MODIFY IT 

AREAGRAPH.JS

import React from 'react';

import {

  Chart as ChartJS,

  CategoryScale,

  LinearScale,

  PointElement,

  LineElement,

  Title,

  Tooltip,

  Filler,

  Legend,

} from 'chart.js';

import { Line } from 'react-chartjs-2';

ChartJS.register(

  CategoryScale,

  LinearScale,

  PointElement,

  LineElement,

  Title,

  Tooltip,

  Filler,

  Legend

);

export const options = {

  responsive: true,

  plugins: {

    legend: {

      position: 'top' ,

    },

    title: {

      display: true,

      text: 'Holdings',

    },

  },

};

export function AreaGraph({data}) {

  return <Line options={options} data={data} />;

}

HERE FOR THE GRAPH DATA IS SENT AS PARAMETERS, WE FETCH DATA FROM THE HOLDINGS.

IN HOLDINGS.JS

THE COMMENTED CODE HERE IS THE CODE COPIED FROM THE GUIDELINES AND IT IS TAKEN AS REFERENCE TO MODIFY.

import React, { useState, useEffect } from "react";

import axios from "axios";

// import { holdings } from "../data/data";

import { AreaGraph } from "./AreaGraph";

export default function Holdings() {

  const [allHoldings, setAllHoldings] = useState([]);

  useEffect(() => {

    axios.get("http://localhost:3002/allHoldings").then((res) => {

      console.log(res.data);

      setAllHoldings(res.data);

    });

  }, []);

  //   const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

  const labels = allHoldings.map((subArray) => subArray["name"]);

  const data = {

    labels,

    datasets: [

      {

        fill: true,

        label: "Stock Price",

        data: allHoldings.map((stock) => stock.price),

        borderColor: "rgb(53, 162, 235)",

        backgroundColor: "rgba(53, 162, 235, 0.5)",

      },

    ],

  };

  // export const data = {

  //   labels,

  //   datasets: [

  //     {

  //       fill: true,

  //       label: 'Dataset 2',

  //       data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),

  //       borderColor: 'rgb(53, 162, 235)',

  //       backgroundColor: 'rgba(53, 162, 235, 0.5)',

  //     },

  //   ],

  // };

  return (

    <>

      <h3 className="title">Holdings({allHoldings.length})</h3>

      <div className="order-table">

        <table>

          <tr>

            <th>Instrument</th>

            <th>Qty.</th>

            <th>Avg.cost</th>

            <th>LTP</th>

            <th>Cur.val</th>

            <th>P&L</th>

            <th>Net chg.</th>

            <th>Day chg.</th>

          </tr>

          {allHoldings.map((stock, index) => {

            const currValue = stock.qty * stock.price;

            const isProfit = currValue - stock.avg * stock.qty >= 0.0;

            const profitClass = isProfit ? "profit" : "loss";

            const dayClass = stock.isLoss ? "loss" : "true";

            return (

              <>

                <tr key={index}>

                  <td>{stock.name}</td>

                  <td>{stock.qty}</td>

                  <td>{stock.avg.toFixed(2)}</td>

                  <td>{stock.price.toFixed(2)}</td>

                  <td>{currValue.toFixed(2)}</td>

                  <td className={profitClass}>

                    {(currValue - stock.avg * stock.qty).toFixed(2)}

                  </td>

                  <td className={profitClass}>{stock.net}</td>

                  <td className={dayClass}>{stock.day}</td>

                </tr>

              </>

            );

          })}

        </table>

      </div>

      <AreaGraph data={data} />

    </>

  );

}

NOW FOR THE WATCHLIST, WE USE DOUGHNOUT GRAPH WE FOLLOW THE SAME PROCEDURE.

DOUGHNOUTGRAPH.JS

import React from "react";

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";

import { Doughnut } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

export function DoughnutChart({ data }) {

  return <Doughnut data={data} />;

}

IN WATCHLIST.JS

import React, { useContext } from "react";

import { useState } from "react";

import { Tooltip, Grow } from "@mui/material";

import { watchlist } from "../data/data";

import { DoughnutChart } from "./DoughnoutChart";

import {

  BarChartOutlined,

  KeyboardArrowDown,

  KeyboardArrowUp,

  MoreHoriz,

} from "@mui/icons-material";

import GeneralContext from "./GeneralContext";

const labels = watchlist.map((subArray) => subArray["name"]);

export default function Watchlist() {

  const data = {

    // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

    labels,

    datasets: [

      {

        label: "Price",

        data: watchlist.map((stock) => stock.price),

        backgroundColor: [

          "rgba(255, 99, 132, 0.5)",

          "rgba(54, 162, 235, 0.5)",

          "rgba(255, 206, 86, 0.5)",

          "rgba(75, 192, 192, 0.5)",

          "rgba(153, 102, 255, 0.5)",

          "rgba(255, 159, 64, 0.5)",

        ],

        borderColor: [

          "rgba(255, 99, 132, 1)",

          "rgba(54, 162, 235, 1)",

          "rgba(255, 206, 86, 1)",

          "rgba(75, 192, 192, 1)",

          "rgba(153, 102, 255, 1)",

          "rgba(255, 159, 64, 1)",

        ],

        borderWidth: 1,

      },

    ],

  };

  return (

    <div className="watchlist-container">

      <div className="search-container">

        <input

          type="text"

          name="search"

          id="search"

          placeholder="Search eg:infy, bse, nifty fut weekly, gold mcx"

          className="search"

        />

        <span className="counts"> {watchlist.length} / 50</span>

      </div>

      <ul className="list">

        {watchlist.map((stock, index) => {

          return (

            <>

              <WatchlistItem stock={stock} key={index} />

            </>

          );

        })}

      </ul>

      <DoughnutChart data={data} />

    </div>

  );

}