lightweight-charts-react-components
Advanced tools
A React library of Lightweight-charts components written on Typescript
This library is a set of React components that wraps the Lightweight-charts library. It provides a simple declarative way to use the Lightweight-charts library in your React application. Check out the Demo to see the components in action.
You can install the library via npm, pnpm or yarn:
npm install lightweight-charts-react-components lightweight-charts
Standalone version of the library is also available for use in the browser without a build step. You can include it in your HTML file using a script tag. Note that library expects global React, ReactDOM and LightweightCharts variables to be available in the global scope.
<head>
<script
src="https://unpkg.com/react@18/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"
crossorigin
></script>
<script
src="https://unpkg.com/lightweight-charts-react-components/dist/lightweight-charts-react-components.standalone.js"
crossorigin
></script>
</head>
<body>
<script>
const { Chart, LineSeries } = LightweightChartsReactComponents;
</script>
</body>
The library provides a set of components that you can use in your React application. Here is a simple example of how to use the Chart and LineSeries components:
import React from "react";
import { Chart, LineSeries } from "lightweight-charts-react-components";
const data = [
{ time: "2023-01-01", value: 100 },
{ time: "2023-01-02", value: 101 },
{ time: "2023-01-03", value: 102 },
];
const App = () => {
return (
<Chart>
<LineSeries data={data} />
</Chart>
);
};
export { App };
The following is an advanced example that demonstrates how to use custom scales, panes and multiple series in a single chart:
import React from "react";
import {
Chart,
LineSeries,
HistogramSeries,
PriceScale,
TimeScale,
TimeScaleFitContentTrigger,
Pane,
} from "lightweight-charts-react-components";
const data = [
{ time: "2023-01-01", value: 100 },
{ time: "2023-01-02", value: 101 },
{ time: "2023-01-03", value: 102 },
];
const volumeData = [
{ time: "2023-01-01", value: 1000, color: "rgba(0, 150, 136, 0.5)" },
{ time: "2023-01-02", value: 1100, color: "rgba(0, 150, 136, 0.5)" },
{ time: "2023-01-03", value: 1200, color: "rgba(0, 150, 136, 0.5)" },
];
const chartOptions = {
// Important to set width and height for the chart
// Otherwise make chart container scale to its parent size by using containerProps, like:
// <Chart containerProps={{ style: { width: '100%', height: '100%' } }} />
// Chart itself automatically resizes to fit its container
width: 600,
height: 400,
// Chart options can be customized here
};
const priceScaleOptions = {
// Price scale options can be customized here
};
const App = () => {
return (
<Chart options={chartOptions}>
<Pane stretchFactor={2}>
<LineSeries data={data} />
<PriceScale id="left" options={priceScaleOptions} />
</Pane>
<Pane>
<HistogramSeries data={volumeData} />
</Pane>
<TimeScale>
<TimeScaleFitContentTrigger deps={[]} />
</TimeScale>
</Chart>
);
};
export { App };
The Chart component requires explicit width and height to render correctly. You can set these dimensions directly via the options prop or make the chart container scale to its parent size using the containerProps prop.
Note that the chart will automatically resize to fit its container.
There may be cases where the chart's parent HTML element has no size defined (for example, when the parent is a flex container with no defined height). In such cases, you need to ensure that the parent element has a defined size (width and height) for the chart to render properly.
The examples app itself is a Demo web application, but it contains a lot of examples of how to use the library. You can find the source code in the samples folder. You can run and test the code locally by cloning the repository and running the examples app.
We welcome contributions of all kinds! Whether it's fixing bugs, adding new features, improving examples, or suggesting ideas—your help is greatly appreciated.
For detailed contribution guidelines, please check out our CONTRIBUTING.md Thank you for helping improve this project!
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
React components for Lightweight Charts
The npm package lightweight-charts-react-components receives a total of 997 weekly downloads. As such, lightweight-charts-react-components popularity was classified as not popular.
We found that lightweight-charts-react-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.