I have implemented lightweight-charts to present a chart using mock data. I am looking to establish a fixed Delta Tooltip on the chart when the page loads, with predetermined start and end dates that are specified as input. Furthermore, I aim to restrict the user's ability to modify or replace this tooltip.
Below is an excerpt of my code:
"use client";
import { useEffect, useRef } from "react";
import { createChart } from "lightweight-charts";
import { BrushableAreaSeries } from "@/components/ui/brushable-area-series/brushable-area-series";
import { DeltaTooltipPrimitive } from "@/components/ui/delta-tooltip/delta-tooltip";
const mockData = [
{ time: "2023-01-01", value: 50 },
{ time: "2023-02-01", value: 55 },
{ time: "2023-03-01", value: 60 },
{ time: "2023-04-01", value: 65 },
{ time: "2023-05-01", value: 70 },
];
const ChartComponent = () => {
const chartContainerRef = useRef(null);
useEffect(() => {
const chart = createChart(chartContainerRef.current, {
width: 600,
height: 400,
});
// Line series for the main data
const lineSeries = chart.addLineSeries();
lineSeries.setData(mockData);
// Include brushable area
const brushableAreaSeries = new BrushableAreaSeries();
const customSeries = chart.addCustomSeries(brushableAreaSeries, {
priceLineVisible: false,
});
customSeries.setData(
mockData.map((item) => ({
time: new Date(item.time).getTime() / 1000,
value: item.value,
}))
);
// Integrate delta tooltip
const tooltipPrimitive = new DeltaTooltipPrimitive({
lineColor: "rgba(0, 0, 0, 0.2)",
});
customSeries.attachPrimitive(tooltipPrimitive);
customSeries.applyOptions({
brushRanges: [
{
range: {
from: new Date("2023-01-01").getTime() / 1000,
to: new Date("2023-05-01").getTime() / 1000,
},
},
],
lineColor: "rgb(40,98,255, 1)",
topColor: "rgba(40,98,255, 0)",
bottomColor: "rgba(40,98,255, 0)",
lineWidth: 3,
});
return () => chart.remove();
}, []);
return (
<div ref={chartContainerRef} style={{ width: "100%", height: "400px" }} />
);
};
export default ChartComponent;