candlesticks not corresponding to y-axis values

[EMChloe]

hi,

Here is a candlestick chart I created using the lightweightcharts library from trading view:

as you can see, when you hover over a candlestick, the y-axis illuminates with the value of that candlestick. if you look at the image below, I have hovered over a different candlestick, and the illuminated value on the y-axis has changed to reflect the value of the new candlestick.

However, when I plot my own (non-financial) data using lightweight charts, the candlesticks don't seem to illuminate the values on the y-axis -- the y axis value remains at "0" no matter which candlestick I hover over (see images below. The candles are quite big but I need to format it to make them look smaller):

Please help

Here is the code, written in Visual Studio Code on Mac:

HTML file:

<title>Document</title>

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script> <script src="Pioneer_CSV_STATIC.js"></script>

JS file:

const getData = async () => {
const res = await fetch('Pioneer_of_the_Nile_original.csv');
const resp = await res.text();
const cdata = resp.split('\n').map((row) => {
const [time1, open, high, low, close] = row.split(',');
// Parse the time string and add 1 hour (in milliseconds)
const time = new Date(${time1}).getTime() / 1000 + 3600; // 3600 seconds = 1 hour
return {
time,
open: high * 1,
high: high * 1,
low: low * 1,
close: low * 1,
};
});
return cdata;
};

const displayChart = async () => {
const chartProperties = {
width: 1500,
height: 600,
timeScale: {
timeVisible: true,
secondsVisible: false,
rightOffset: 12, // Add a right offset to make room for the y-axis
},
priceScale: {
position: 'right', // Position of the price scale
mode: 0, // Normal mode
scaleMargins: {
top: 25,
bottom: 0.5,
},
minMove: 0.3, // Set the minimum step between price scale values to 0.3
},
};

const domElement = document.getElementById('tvchart');
const chart = LightweightCharts.createChart(domElement, chartProperties);
const candleseries = chart.addCandlestickSeries();
const klinedata = await getData();
candleseries.setData(klinedata);

// Calculate the time range of the data
const firstDataPoint = klinedata[0].time;
const lastDataPoint = klinedata[klinedata.length - 1].time;
const dataRange = lastDataPoint - firstDataPoint;

// Set the visible time range to include a buffer on both ends of the data range
const buffer = 0.1; // Adjust the buffer as needed
const visibleRange = dataRange * (1 + buffer);
chart.timeScale().setVisibleRange({
from: firstDataPoint - visibleRange,
to: lastDataPoint + visibleRange,
});
};

displayChart();

And here is my small dataset, formatted from left to right as data, high value, low value:

11-Apr-23,1.0395,0.9405,,,,,,
18-Apr-23,1.0815,0.9785,,,,,,
24-Apr-23,1.092,0.988,,,,,,
04-May-23,1.0815,0.9785,,,,,,
09-May-23,1.1025,0.9975,,,,,,
29-May-23,1.1025,0.9975,,,,,,
13-Jun-23,1.1025,0.9975,,,,,,
30-Jun-23,1.1025,0.9975,,,,,,
26-Jul-23,1.0815,0.9785,,,,,,

[EMChloe]

SOLUTION: I removed "open" and "close" from the following line of code:

const [time1, open, high, low, close] = row.split(',');

because I don't have open and close values. just high and low. this fixed it and the y-axis now illuminates with different values depending on the candle you are hovering over