lightweight-charts | Performant financial charts built with HTML5 canvas | Chart library

I have looked into the documentation about minValue and maxValue but it didn't help as i cannot figure out the exact syntax.

Sounds like this is what you're seeking then? Here's an example from another documentation page. Looks like you just need to add priceRange like you did with timeScale, priceScale, etc.

You can use the label property of ReferenceLine component

There is no example on this one because this is not related to Nuxt anyhow, neither really to Vue but more of a generic JS vanilla question.

Few points:

• it's great to import your component only when it's needed aka in your component (and not globally with Nuxt plugins), kudos for this one!
• usually, if you want to call an external function, you do this into mounted(), it depends on what you're doing there of course
• meanwhile, you should probably use $refs rather than document.body since we're in a state-based framework here
• lineSeries.setData could maybe be moved to data and injected afterwards

If you want to use a local file you should be referencing to the js file:

Im assuming you're not using webpack or any bundler.

For the module to be considered you'd need to import the library differently and as follow import 'https://unpkg.com/lightweight-charts@latest/dist/lightweight-charts.standalone.production.js'; in your chart.js script and then use it as advised in the doc.

Thanks to @timocov to pointing me to a related issue on the projects github. Turns out this is a known bug.

This is how I worked around it:

To generate "future" points you can use whitespace points. If you use them, lightweight-charts will display any time data but not price values/bars/candles.

That because you are trying to import the library in SSR context. Using next.js Dynamic with ssr : false should fix the issue :

I assume that the monthly$: Observable variable gets changed correctly from what you wrote and that the Observable gets the new value (you can check that by logging). If that is the case, then the [data]="monthly" binding will be correctly updated by the change-detection.

That would mean, your problem is that the tvc component does not update correctly, because it does not react to changes in @Input() data. If you change the component to the following, it should work:

(There might be syntax errors on my part because I write this without being able to check it because you did not provide a working example code)