Skip to content

Commit

Permalink
update migration doc
Browse files Browse the repository at this point in the history
  • Loading branch information
illetid committed Sep 2, 2024
1 parent ed671bb commit 75a0b61
Showing 1 changed file with 6 additions and 7 deletions.
13 changes: 6 additions & 7 deletions website/docs/migrations/from-v4-to-v5.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,17 @@ In the new version of Lightweight Charts, the watermark feature has undergone si
2. **Re-implementation**: It's now re-implemented as a Pane Primitive (plugin) included within the library.
3. **Improved Tree-shaking**: This change makes the feature more tree-shakeable, potentially reducing bundle sizes for users who don't need watermarks.
4. **Added an Image Watermark Primitive**: In addition to the usual text based watermark, there is now
an image watermark feature provided by the [`ImageWatermark`](/api/classes/ImageWatermark.md) primitive.
an image watermark feature provided by the [`createImageWatermark`](/api/functions/createImageWatermark.md) primitive.
5. **Series Markers**: The series markers feature has been moved to a separate plugin as well. To create a series marker, use the [`createSeriesMarkers`](/api/functions/createSeriesMarkers.md) function exported from the library.

If you're currently using the watermark feature, you'll need to make a few adjustments to your code.

### Accessing the New TextWatermark

The TextWatermark primitive is now available as follows:

- **ESM builds**: Import [`TextWatermark`](/api/classes/TextWatermark.md) directly.
- **Standalone script build**: Access via `LightweightCharts.TextWatermark`.
- **ESM builds**: Import [`createTextWatermark`](/api/functions/createTextWatermark.md) directly.
- **Standalone script build**: Access via `LightweightCharts.createTextWatermark`.

### Changes in Options

Expand All @@ -47,7 +48,8 @@ const chart = createChart(container, options);
const mainSeries = chart.addLineSeries();
mainSeries.setData(generateData());

const textWatermark = new TextWatermark({
const firstPane = chart.panes()[0];
createTextWatermark(firstPane, {
horzAlign: 'center',
vertAlign: 'center',
lines: [
Expand All @@ -66,9 +68,6 @@ const textWatermark = new TextWatermark({
},
],
});

const firstPane = chart.panes()[0];
firstPane.attachPrimitive(textWatermark);
```

## Plugin Typings
Expand Down

0 comments on commit 75a0b61

Please sign in to comment.