foldbank-mock/web/app/components/Graph.tsx

"use client"

import React from 'react'
import Chart from 'chart.js/auto';

import styles from './graph.module.css'

export default function Graph() {
  return (
    <canvas
      id="chart"
      width="400"
      height="200"
      ref={
        node => {
          if (node) {
            var ctx = node.getContext("2d");

            /*** Gradient ***/
            var gradient = ctx.createLinearGradient(0, 0, 0, 300);
            gradient.addColorStop(0, 'rgba(82, 183, 97, 1)');
            gradient.addColorStop(1, 'rgba(82, 183, 97, 0)');
            /***************/

            var data = {
              labels : ["NOV 15", "NOV 30", "DEC 15", "DEC 31", "JAN 15"],
              datasets: [
                {
                  label: "",
                  fill: true,
                  backgroundColor: gradient,
                  data : [25.0, 25.0, 30.0, 27.0, 27.0, 19.0]
                }
              ]
            };

            var options = {
              responsive: true,
              plugins: {
                legend: {
                  display: false,
                }
              },
              scales: {
                x: {
                  border: {
                    display: false,
                  },
                  grid: {
                    display: false,
                  },
                },
                y: {
                  border: {
                    display: false,
                  },
                  grid: {
                    display: false,
                  },
                  ticks: {
                    display: false,
                  }
                }
              }
            };

            new Chart(ctx, {
              type: "line",
              data: data,
              options: options,
            });
          }
        }
      }
    >
    </canvas>
  )
}