lightweight-charts : how to add plugin of session-highlighting to an existing project

Question

I have created a react-vite project in which I want to add session-highlighting plugin but I am unable to add it to the project .

I had read the documentation but it is not clear how to implement the plugin.

So like above image I have to make the chart. can anybody help me

TradingChart.jsx

import { createChart } from "lightweight-charts";
import React, { useEffect, useRef, useState } from "react";
// import { SessionHighlighting } from "../plugins/session-highlighting/session-highlighting";

const TradingChart = ({ data }) => {
  const chartContainerRef = useRef();

  // const sessionHighlightingPlugin = new SessionHighlighting();
  // const myCustomSeries = chart.addCustomSeries(sessionHighlightingPlugin, {
  //   lowValue: 0,
  //   highValue: 1000,
  // });
  // console.log(myCustomSeries);
  useEffect(() => {
    if (chartContainerRef.current) {
      const chartOptions = {
        layout: {
          background: { type: "solid", color: "transparent" },
        },
        leftPriceScale: {
          visible: true,
          scaleMargins: {
            top: 0.1,
            bottom: 0.1,
          },
        },
        rightPriceScale: {
          visible: false,
        },
        width: 700,
        height: 300,
      };

      const chart = createChart(chartContainerRef.current, chartOptions);

      const newSeries = chart.addAreaSeries({
        lineColor: "#ff0400",
        topColor: "#f36361",
        bottomColor: "rgba(255, 41, 41, 0.052)",
      });

      const chartData = data.map((item) => ({
        time: item.date,
        value: item.cumsum,
      }));

      newSeries.setData(chartData);

      const watermark = document.createElement("div");
      watermark.style.position = "absolute";
      watermark.style.zIndex = "1";
      watermark.style.top = "80%";
      watermark.style.left = "100%";
      watermark.style.transform = "translate(-50%, -50%)";
      watermark.style.width = "200px";
      watermark.style.height = "100px";
      watermark.style.backgroundImage = `url("/logo_white.png")`;
      watermark.style.backgroundRepeat = "no-repeat";
      watermark.style.backgroundSize = "contain";
      watermark.style.opacity = "0.3";
      chartContainerRef.current.style.position = "relative";
      chartContainerRef.current.appendChild(watermark);

      return () => {
        chart.remove();
      };
    }
  }, [data]);

  return <div ref={chartContainerRef}></div>;
};

export default TradingChart;

InformationTable.jsx

import * as React from "react";
import TableContainer from "@mui/material/TableContainer";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableBody from "@mui/material/TableBody";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import Paper from "@mui/material/Paper";
import { ddPeriods } from "../../utils/ddPeriods";

const InformationTable = () => {
  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead style={{ backgroundColor: "lightgrey" }}>
          <TableRow>
            <TableCell style={{ borderRight: "1px solid #ddd" }}>
              Period
            </TableCell>
            <TableCell align="right" style={{ borderRight: "1px solid #ddd" }}>
              MaxDD
            </TableCell>
            <TableCell align="right">Days</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {ddPeriods.data.map((period, index) => (
            <TableRow key={index}>
              <TableCell
                component="th"
                scope="row"
                style={{ borderRight: "1px solid #ddd" }}
              >
                {`${period.Start_Date} - ${period.End_Date}`}
              </TableCell>
              <TableCell
                align="right"
                sx={{ borderRight: "1px solid #ddd", color: "#f36361" }}
              >
                {(Math.round(period.Max_Drawdown * 100) / 100).toFixed(2)}
              </TableCell>
              <TableCell align="right">{period.Drawdown_days}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default InformationTable;

MainContainer.jsx

import * as React from "react";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { returnsData } from "../../utils/returnsData";
import TradingChart from "../TradingChart";
import InformationTable from "./InformationTable";

const MainContainer = () => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: { xs: "column", sm: "row" },
        gap: 2,
        backgroundColor: "#EEEEEE",
        padding: 2,
      }}
    >
      <Card variant="outlined">
        <CardContent>
          <TradingChart data={returnsData.data.combined} />
        </CardContent>
      </Card>
      <Card sx={{ minWidth: 275, flex: 1 }} variant="outlined">
        <CardContent>
          <InformationTable />
        </CardContent>
      </Card>
    </Box>
  );
};

export default MainContainer;

I want to highlight the Period tab from the table inside the chart.