website/tutorials/react/01-simple.mdx
This example demonstrates how to embed Lightweight Charts™ in a React component. Use it as a starting point and adapt it to your needs by adding properties or additional functionality.
Clone the Parcel starter kit and install dependencies to set up a project. You can use any other tool or starter kit that fits your requirements.
git clone [email protected]:brandiqa/react-parcel-starter.git lwc-react
cd lwc-react
npm install
The code below defines a React component that renders a chart with an area series. You can change the series type to any other, such as candlestick or line.
:::info
In this example, chart colors are specified with props depending on the current theme (light or dark). In a real application, consider using Context instead.
:::
import { ThemedChart } from '@site/src/components/tutorials/themed-chart-colors-wrapper'; import CodeBlock from '@theme/CodeBlock'; import code from '!!raw-loader!@site/src/components/tutorials/simple-react-example';
<CodeBlock replaceThemeConstants className="language-jsx">{code}</CodeBlock>
Execute the npm start command in the lwc-react folder to run the project locally. Then open http://localhost:1234 in your web browser to see the result.
import { App } from '@site/src/components/tutorials/simple-react-example'; import styles from '@site/src/pages/chart.module.css';
<div className={styles.ChartContainer}> <ThemedChart ChartComponent={App}/> </div>As a next step, consider the advanced example, which shows how to embed Lightweight Charts™ into a component having child components.