i run into the issue of TradingView Lightweight Chart, I am not able to render the markers, while my lineSeries can be rendered properly, I have tried to debug, but nothing seems to be wrong, the time are sorted in order.
import React, { useEffect, useRef } from "react";
import { createChart, CrosshairMode } from "lightweight-charts";
import "../styles.css";
let spotLineSeries;
let perpLineSeries;
let frLineSeries;
let gapLineSeries;
function Chart({ spotData, perpData, frData, gapData, entryData, exitData }) {
const chartContainerRef = useRef();
const chart = useRef();
const resizeObserver = useRef();
useEffect(() => {
console.log("hi_1");
chart.current = createChart(chartContainerRef.current, {
width: chartContainerRef.current.clientWidth,
height: chartContainerRef.current.clientHeight,
...
}, []);
useEffect(() => {
if (chart.current) spotLineSeries.setData(spotData);
perpLineSeries.setData(perpData);
frLineSeries.setData(frData);
gapLineSeries.setData(gapData);
gapLineSeries.setMarkers(entryData);
gapLineSeries.setMarkers(exitData);
});
// Resize chart on container resizes.
useEffect(() => {
resizeObserver.current = new ResizeObserver((entries) => {
const { width, height } = entries[0].contentRect;
chart.current.applyOptions({
width,
height,
priceFormat: {
type: "price",
precision: 5,
},
});
setTimeout(() => {
chart.current.timeScale().fitContent();
}, 0);
});
resizeObserver.current.observe(chartContainerRef.current);
return () => resizeObserver.current.disconnect();
}, []);
return <div ref={chartContainerRef} className="chart-container"></div>;
export default Chart;This is how I declared the markers:
[{
color: '#f54242',
position: 'inBar',
shape: 'arrowUp',
time: 1636449000,
text: 'Exit'
}]