Lightweight charts not plotting y-axis with own dataset

[EMChloe]

Hi,

Here is the code to plot a static candlestick lightweight chart using your own csv file:

html file:

<title>Document</title>

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

js file:
const getData = async () => {
const res = await fetch('ohlcv_new.csv');
const resp = await res.text();
// console.log(resp);
const cdata = resp.split('\n').map((row) => {
const [time1, open, high, low, close] = row.split(',');
return {
time: new Date(${time1}).getTime() / 1000,
open: open * 1,
high: high * 1,
low: low * 1,
close: close * 1,
};
});
return cdata;
// console.log(cdata);
};

// getData();

const displayChart = async () => {
const chartProperties = {
width: 1500,
height: 600,
timeScale: {
timeVisible: true,
secondsVisible: false,
},
priceScale: {
position: 'right', // Position of the price scale
mode: 0, // Normal mode
scaleMargins: {
top: 25,
bottom: 0.5,
},
},
};

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

displayChart();

When I run the code it shows a beautiful candlestick chart in my browser (see image attached), however, the only thing that's missing is the y-axis. Does anyone know how I can get the y-axis to plot with the values on it? I have attached another image of a candlestick chart which DOES show the y-axis. This is what I want on my chart.

The code that produces the candlestick chart with the y-axis shown on the chart doesn't import the data from a csv file, it just lists the data as a long list of data points inside brackets (), whereas in the code above I have imported the data as a csv file.

I am writing my code on Visual Studio Code on Mac.

Thanks

[AdvMaple]

I can see the y-axis on the right hand side of the chart, in your image.
Could you draw on the image to clarify what you want display?

[AdvMaple]

And if you could, can you make a reproducing codesandbox?
I try to make one based on the the code you provide but the y-axis still showing.

This might cause by css, you might want to check your css, the page might be overflow and hidden away the y-axis

[EMChloe]

Hi, here is the dataset!

I'm still new to all of this but I think I know how to check my CSS. I don't know how to make a reproducing codesandbox but I can try figure it out shortly (just about to head out right now). Thanks so much for your support so far (:

The columns from left to right: Date ("time1" in code), open, high, low, close. I deleted the column titles because I thought this was making the code not run properly

ohlcv_new.csv

[EMChloe]

Also, very interesting and reassuring that the code executes perfectly fine and as expected for you!

[AdvMaple]

I imported the data and the y-axis is there.
Here the codesandbox: link

[EMChloe]

Hi @AdvMaple thank you so much for your patience and for helping me. I realised that the error was that I simply did not scroll to the right far enough to see the y-axis! When I executed the code using the Tradingview data rather than my own dataset, the y-axis appeared on the screen at all times - you didnt have to scroll all the way to the right to find it. Do you know if there is a fix for this? it would be nice to be able to see the y-axis when I have not scrolled all the way to the end of the graph.

My apologies if I wasted your time. Thanks again for being patient with me and for helping (:

Here's an image of what I mean:

[AdvMaple]

Here, I think you can do 2 thing:

1. call timeScale.fitContent(); to automatic zoom
2. Set a css max-height on the chart container, and ther chart will auto scale

[EMChloe]

thanks so much @AdvMaple you've saved the day! The y-axis is now visible without having all of this blank space between the candlesticks and the axis (: