I'm having trouble rendering my chart within a React component

[jonathanrstern]

Everything with my chart is working beautifully -- the problem is that when I render the chart nothing else gets displayed on the page.

I've pasted below the example code that comes with the Lightweight Charts documentation. I'm pretty sure the problem is related to the first argument of createChart -- document.body.

Does Lightweight Charts work with React?

import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

(EDIT)
Alternatively, it would be great to be able to add a TradingView widget to my website.
https://www.tradingview.com/widget/advanced-chart/

Is there a good way to do this with React?

[timocov]

Does Lightweight Charts work with React?

Yes, it does. lightweight-charts doesn't have any restrictions or limitations on what you could use as a framework or libraries, i.e. it is framework-agnostic.

I've pasted below the example code that comes with the Lightweight Charts documentation. I'm pretty sure the problem is related to the first argument of createChart -- document.body.

Have you tried to create a container for your chart on the page so the library will affect only that DOM node? Even though the library doesn't replace anything in the provided container, but just give it a try.

Btw, did you read this thread #200? Probably you'll find something useful there.

[jonathanrstern]

Thank you so much, Evgeniy