You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In this major release, the required version of the Lightweight Charts package has been upgraded to 4.0.0 to support the package's new features.
6
+
7
+
Check out `[email protected]`[release notes](https://github.com/tradingview/lightweight-charts/releases/tag/v4.0.0) first.
8
+
9
+
### Breaking changes
10
+
11
+
- ESM only (CJS support can be added on demand in the future).
12
+
- Properties that were renamed or removed in `[email protected]` were also renamed or removed in wrappers.
13
+
14
+
### New features
15
+
16
+
- Added `markers` property to `<[Type]Series>` components.
17
+
- Supported `autoSize` option on `<Chart>` component.
18
+
- Reduced layout shift on SSR. The chart component will reserve the specified width and height if the chart is not auto-sized. New `[email protected]` features are also available without being explicitly mentioned in this changelog.
19
+
20
+
New `[email protected]` features are also available without being explicitly mentioned in this changelog.
Copy file name to clipboardExpand all lines: packages/lib/README.md
+58-4Lines changed: 58 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -92,8 +92,62 @@ To pass a data to a series you can use the `data` property. Look [here](https://
92
92
By default `data` represents only the **initial** data. Any subsequent data update does not update series.
93
93
If you want to change this behavior please add `reactive={true}` to your series component. In this case series will apply a new data if it is not reference equal to previous array.
94
94
95
-
### Other components
95
+
#### Passing markers
96
+
To pass markers to a series you can use the `markers` property. Markers should be an array of `SeriesMarker<Time>`.
97
+
98
+
### Price line
99
+
100
+
To draw price line add `<PriceLine>` component inside any series.
101
+
```jsx
102
+
<Chart width={600} height={300}>
103
+
<LineSeries data={data}>
104
+
<PriceLine
105
+
title="minimum price"
106
+
price={minimumPrice}
107
+
/>
108
+
<PriceLine
109
+
title="average price"
110
+
price={avgPrice}
111
+
/>
112
+
<PriceLine
113
+
title="maximum price"
114
+
price={maximumPrice}
115
+
/>
116
+
</LineSeries>
117
+
</Chart>
118
+
```
119
+
120
+
You can pass any options from [`PriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) as separate property. The `price` property is mandatory in dev mode.
121
+
122
+
Use the `ref` property to get reference to a [`IPriceLine`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) instance.
123
+
124
+
### Time scale
125
+
126
+
`<TimeScale>` - the component is a binding to the current time scale of the current chart.
127
+
This component has to be nested inside a chart component and should not have duplicates. Each chart has only one time scale.
128
+
129
+
You can pass any option from [`TimeScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions) as separate property.
Use the `ref` property to get reference to a [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) instance.
137
+
138
+
Note: don't use `ChartOptions['timeScale']` and `<TimeScale>` component at the same time. This can lead to uncontrolled overwriting of options.
139
+
140
+
### Price scale
141
+
142
+
`<PriceScale>` - the component is a bindings to a certain price scale.
143
+
This component has to be nested inside chart component and requires an `id` property. Two price scales with the same `id` within the same chart result in undefined behaviour.
144
+
145
+
You can pass any option from [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) as separate property.
146
+
147
+
Note: don't use `ChartOptions['leftPriceScale']'` or `ChartOptions['rightPriceScale']` or `ChartOptions['overlayPriceScale']` and `<PriceScale>` at the same time. This can lead to uncontrolled overwriting of options.
148
+
149
+
## Licence
150
+
151
+
MIT
96
152
97
-
-`<PriceLine>` - price line (`IPriceLine`). It has to be nested inside `<[Type]Series>` component.
98
-
-`<TimeScale>` - time-scale (`ITimeScaleApi`). It has to be nested inside `<Chart>` component.
99
-
-`<PriceScale>` - price-scale (`IPriceScaleApi`). It has to be nested inside `<Chart>` component.
153
+
Review the license [requirements](https://github.com/tradingview/lightweight-charts#license) for the required "attribution notice" in the Lightweight Chart Repository.
0 commit comments