shen/lightweight-charts
1
0
Fork 0
mirror of https://github.com/tradingview/lightweight-charts.git synced 2024-11-25 16:50:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add trademark symbols to Lightweight Charts™

Browse Source
This commit is contained in:
Mark Silverwood 2023-03-21 10:32:33 +00:00
parent 45084b91a6
commit bb8ff6850f
54 changed files with 106 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@ -7,7 +7,7 @@ assignees: ''
---
**Lightweight Charts Version:** <!-- 1.0.0 -->
**Lightweight Charts™ Version:** <!-- 1.0.0 -->
**Steps/code to reproduce:**

2
BUILDING.md
View File

@ -1,4 +1,4 @@
# Building Lightweight Charts
# Building Lightweight Charts™
The minimal supported version of [NodeJS](https://nodejs.org/) for development is 16.16.

4
CONTRIBUTING.md
View File

@ -1,4 +1,4 @@
# Contributing to Lightweight Charts
# Contributing to Lightweight Charts™
## Issues
@ -23,7 +23,7 @@ When logging a bug, please be sure to include the following:
## Pull Requests
- Outside contributors may implement enhancement/features only _after an approval_ (label "help wanted") by Lightweight Charts project maintainers.
- Outside contributors may implement enhancement/features only _after an approval_ (label "help wanted") by Lightweight Charts™ project maintainers.
- For build instructions/suggestions see [BUILDING.md](./BUILDING.md).
- After the review process has started, please **don't** use rebase to update the branch, use merge instead.

2
NOTICE
View File

@ -1,2 +1,2 @@
TradingView Lightweight Charts
TradingView Lightweight Charts™
Copyright (с) 2023 TradingView, Inc. https://www.tradingview.com/

6
README.md
View File

@ -5,7 +5,7 @@
<img width="200" src="https://github.com/tradingview/lightweight-charts/raw/master/.github/logo.svg?sanitize=true">
</a>
<h1>Lightweight Charts</h1>
<h1>Lightweight Charts™</h1>
[![CircleCI][ci-img]][ci-link]
[![npm version][npm-version-img]][npm-link]
@ -18,9 +18,9 @@
[Demos][demo-url] | [Documentation](https://tradingview.github.io/lightweight-charts/) | [Discord community](https://discord.gg/UC7cGkvn4U) | [Reddit](https://www.reddit.com/r/TradingView/)
TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts.
TradingView Lightweight Charts™ are one of the smallest and fastest financial HTML5 charts.
The Lightweight Charts library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance.
The Lightweight Charts™ library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance.
It is the best choice for you if you want to replace static image charts with interactive ones.
The size of the library is close to static images but if you have dozens of image charts on a web page then using this library can make the size of your web page smaller.

2
package.json
View File

@ -4,7 +4,7 @@
"name": "lightweight-charts",
"author": "TradingView, Inc.",
"license": "Apache-2.0",
"description": "Financial lightweight charts built with HTML5 canvas",
"description": "Performant financial charts built with HTML5 canvas",
"bugs": {
"url": "https://github.com/tradingview/lightweight-charts/issues"
},

2
rollup.config.js
View File

@ -35,7 +35,7 @@ function getConfig(
banner: `
/*!
* @license
* TradingView Lightweight Charts v${currentVersion}
* TradingView Lightweight Charts™ v${currentVersion}
* Copyright (c) ${year} TradingView, Inc.
* Licensed under Apache License 2.0 https://www.apache.org/licenses/LICENSE-2.0
*/`.trim(),

4
website/README.md
View File

@ -1,6 +1,6 @@
# Lightweight Charts Documentation Website
# Lightweight Charts™ Documentation Website
The source of the documentation website for Lightweight Charts. This website is built using [Docusaurus 2](https://v2.docusaurus.io/).
The source of the documentation website for Lightweight Charts™. This website is built using [Docusaurus 2](https://v2.docusaurus.io/).
The aim of this documentation is to make using the library frictionless.

6
website/docs/android.md
View File

@ -1,6 +1,6 @@
---
id: android
description: You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
description: You can use Lightweight Charts™ inside an Android application. To use Lightweight Charts™ in that context, you can use our Android wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
keywords:
- charts
- android
@ -15,7 +15,7 @@ sidebar_position: 7
# Android wrapper
:::note
You can find the source code of the Lightweight Charts Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android).
You can find the source code of the Lightweight Charts™ Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android).
:::
:::info
@ -24,7 +24,7 @@ This wrapper is currently still using `v3.8.0`. This will be updated to `v4.0.0`
:::
You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
You can use Lightweight Charts™ inside an Android application. To use Lightweight Charts™ in that context, you can use our Android wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
## Installation

2
website/docs/intro.md
View File

@ -8,7 +8,7 @@ sidebar_position: 0
## Requirements
First of all, Lightweight Charts is _a client-side_ library.
First of all, Lightweight Charts™ is _a client-side_ library.
This means that it does not and cannot work on the server-side (i.e. NodeJS), at least out of the box.
The code of `lightweight-charts` package is targeted to [_es2016_ language specification](https://262.ecma-international.org/7.0/).

6
website/docs/ios.md
View File

@ -1,6 +1,6 @@
---
id: ios
description: You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
description: You can use Lightweight Charts™ inside an iOS application. To use Lightweight Charts™ in that context, you can use our iOS wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
keywords:
- charts
- iOS
@ -15,7 +15,7 @@ sidebar_position: 6
# iOS wrapper
:::note
You can find the source code of the Lightweight Charts iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS).
You can find the source code of the Lightweight Charts™ iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS).
:::
:::info
@ -24,7 +24,7 @@ This wrapper is currently still using `v3.8.0`. This will be updated to `v4.0.0`
:::
You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
You can use Lightweight Charts™ inside an iOS application. To use Lightweight Charts™ in that context, you can use our iOS wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
## Installation

2
website/docs/migrations/from-v2-to-v3.md
View File

@ -1,6 +1,6 @@
# From v2 to v3
Lightweight charts library 3.0 announces the major improvements: supporting two price scales and improving the time scale API.
Lightweight Charts™ library 3.0 announces the major improvements: supporting two price scales and improving the time scale API.
In order of keep the API clear and consistent, we decided to allow breaking change of the API.
In this document you can find the migration guide from the previous version to 3.0.

6
website/docs/release-notes.md
View File

@ -19,7 +19,7 @@ sidebar_position: 8
Long overdue as it’s been nearly 1 year since our last major update, but behold before all the changes that have happened over the last 12 months.
In total, more than 20 tickets have been addressed with one of the most important ones being **fancy-canvas** – the library we use to configure HTML canvas in Lightweight Charts.
In total, more than 20 tickets have been addressed with one of the most important ones being **fancy-canvas** – the library we use to configure HTML canvas in Lightweight Charts™.
Please view the migration guide here: [Migrating from v3 to v4](./migrations/from-v3-to-v4).
@ -81,7 +81,7 @@ Please view the migration guide here: [Migrating from v3 to v4](./migrations/fro
- Crosshair label text appears on the chart during initial render | [#1255](https://github.com/tradingview/lightweight-charts/issues/1255)
- Small text artefacts from the crosshair no longer appear on the time axis before any interaction with the chart.
As always, we thank you for your support and help in making Lightweight Charts the best product on the financial web. And a big shout out to our hero contributors [thanhlmm](https://github.com/thanhlmm), [CommanderRoot](https://github.com/CommanderRoot), [samhainsamhainsamhain](https://github.com/samhainsamhainsamhain) & colleague [Nipheris](https://github.com/Nipheris)!
As always, we thank you for your support and help in making Lightweight Charts™ the best product on the financial web. And a big shout out to our hero contributors [thanhlmm](https://github.com/thanhlmm), [CommanderRoot](https://github.com/CommanderRoot), [samhainsamhainsamhain](https://github.com/samhainsamhainsamhain) & colleague [Nipheris](https://github.com/Nipheris)!
You can always send us your feedback via GitHub.
We look forward to hearing from you! And as always, happy trading!
Team TradingView
@ -90,7 +90,7 @@ See [issues assigned to this version's milestone](https://github.com/tradingview
## 3.8.0
We're happy to announce the next release of Lightweight Charts library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own [documentation website](https://tradingview.github.io/lightweight-charts/) that replaces the documentation in the repository. Check it out and share your feedback in [this discussion thread](https://github.com/tradingview/lightweight-charts/discussions/921).
We're happy to announce the next release of Lightweight Charts™ library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own [documentation website](https://tradingview.github.io/lightweight-charts/) that replaces the documentation in the repository. Check it out and share your feedback in [this discussion thread](https://github.com/tradingview/lightweight-charts/discussions/921).
**Enhancement**

2
website/docusaurus.config.js
View File

@ -328,7 +328,7 @@ async function getConfig() {
],
},
{
title: 'Lightweight Charts Community',
title: 'Lightweight Charts™ Community',
items: [
{
label: 'Stack Overflow',

6
website/src/pages/index.tsx
View File

@ -188,8 +188,8 @@ const codeBlocks: CodeBlockProps[] = [
},
];
const header = 'Lightweight Charts Documentation';
const paragraph = `Lightweight Charts is a library for creating interactive financial charts. This documentation site provides all the information needed to get started with Lightweight Charts and help you make the most of its features.`;
const header = 'Lightweight Charts™ Documentation';
const paragraph = `Lightweight Charts™ is a library for creating interactive financial charts. This documentation site provides all the information needed to get started with Lightweight Charts™ and help you make the most of its features.`;
const showBanner = true;
@ -198,7 +198,7 @@ function Index(): JSX.Element {
<>
{showBanner ? (
<Banner
text="Big news! Version 4.0 of Lightweight Charts is now available"
text="Big news! Version 4.0 of Lightweight Charts™ is now available"
link="https://github.com/tradingview/lightweight-charts/releases/tag/v4.0.0"
linkText="Read more"
/>

2
website/tutorials/customization/chart-colors.mdx
View File

@ -45,7 +45,7 @@ We can set the page background by adding the following code which the `<style>`
## Applying options
One final explanation before we dive into customizing the chart. There are generally two ways to specify options for an API instance (such as IChartApi, ISeriesApi, IPriceScale, etc...) within Lightweight Charts. The first is to specify the options at the time of creation, and the second is to specify the options at any other time by using the `applyOptions` method. Which approach to use is primarily up to you, however, you can only use the `applyOptions` approach if you are changing the options at a later stage after the instance has been created.
One final explanation before we dive into customizing the chart. There are generally two ways to specify options for an API instance (such as IChartApi, ISeriesApi, IPriceScale, etc...) within Lightweight Charts™. The first is to specify the options at the time of creation, and the second is to specify the options at any other time by using the `applyOptions` method. Which approach to use is primarily up to you, however, you can only use the `applyOptions` approach if you are changing the options at a later stage after the instance has been created.
This tutorial will make use of both approaches to provide cleaner and easier-to-follow code.

4
website/tutorials/customization/creating-a-chart.mdx
View File

@ -20,9 +20,9 @@ If you haven't already, please read the [Introduction](intro). At the bottom of
Our first task will be to create a chart and get it visible on the page. A more detailed explanation of these steps is available [here](/docs).
## Adding the Lightweight Charts script
## Adding the Lightweight Charts™ script
For this example, we will be loading the Lightweight Charts library using the standalone version hosted on a CDN server. This approach allows us to just include the script tag within our HTML file and not be concerned about spinning up a web server to host our files, and thus open the HTML file directly on our computer.
For this example, we will be loading the Lightweight Charts™ library using the standalone version hosted on a CDN server. This approach allows us to just include the script tag within our HTML file and not be concerned about spinning up a web server to host our files, and thus open the HTML file directly on our computer.
We can add the script tag to the HTML page by including the following code within the `<head>` element of the page. In this case, we will insert the code between the `<title>` and `<style>` elements.

2
website/tutorials/customization/data-points.mdx
View File

@ -18,7 +18,7 @@ import IterativeGuideWarning from './_iterative-guide-warning-partial.mdx';
In this section, we will modify the candlestick data such that we can individually set the color for each candlestick.
If we take a look at the interface for the candlestick data here: [CandlestickData](/docs/api/interfaces/CandlestickData), we can see a few properties related to color: `color`, `borderColor`, and `wickColor`. Lightweight Charts allows the data points to override the colors specified for series as a whole. In other words, if a datapoint has one of these properties set then it will use that color for that data point instead of the colors used for the rest of the series. We can use this feature to highlight a few key data points in a different color.
If we take a look at the interface for the candlestick data here: [CandlestickData](/docs/api/interfaces/CandlestickData), we can see a few properties related to color: `color`, `borderColor`, and `wickColor`. Lightweight Charts™ allows the data points to override the colors specified for series as a whole. In other words, if a datapoint has one of these properties set then it will use that color for that data point instead of the colors used for the rest of the series. We can use this feature to highlight a few key data points in a different color.
We are going to change the color of all data points which have a `close` value over `205` to orange. We will use the map higher-order function to go through each data point and either leave it alone if it is below `205` or otherwise add the `color` and `wickColor` properties (set to 'orange'). We don't need to set the `borderColor` because we disabled that in an earlier step.

8
website/tutorials/customization/finishing-touches.mdx
View File

@ -20,7 +20,7 @@ In this section we are going to add a few finishing touches to the chart which a
## Changing the font
It is possible to specify a custom font to use within the Lightweight Chart. As an example we are going to load the `Roboto` font from [Google Fonts](https://fonts.google.com/) by adding the following tags within the `<head>` element on the page (for example, just below the `<title>` element).
It is possible to specify a custom font to use within the Lightweight Charts™. As an example we are going to load the `Roboto` font from [Google Fonts](https://fonts.google.com/) by adding the following tags within the `<head>` element on the page (for example, just below the `<title>` element).
```html
<title>Lightweight Charts Customization Tutorial</title>
@ -33,7 +33,7 @@ It is possible to specify a custom font to use within the Lightweight Chart. As
/>
```
We can then tell Lightweight charts to use that specific font by setting the `fontFamily` property within the `layout` property of the chart options as follows:
We can then tell Lightweight Charts™ to use that specific font by setting the `fontFamily` property within the `layout` property of the chart options as follows:
```js
// Changing the font
@ -46,7 +46,7 @@ chart.applyOptions({
## Adding an attribution link
We can add an attribution link to the top left corner of the chart to let the world know that your chart is powered by Lightweight Charts. As thanks for creating this product, we'd be grateful if you add it in a prominent place.
We can add an attribution link to the top left corner of the chart to let the world know that your chart is powered by Lightweight Charts™. As thanks for creating this product, we'd be grateful if you add it in a prominent place.
First, we need to add a few css class rules to the `<style>` tag as follows:
@ -91,7 +91,7 @@ and then add the following `<div>` element within the container element used for
<!-- Lightweight Charts Attribution Message and Link -->
<div class="lw-attribution">
<a href="https://tradingview.github.io/lightweight-charts/"
>Powered by Lightweight Charts</a
>Powered by Lightweight Charts™</a
>
</div>
<!-- highlight-end -->

4
website/tutorials/customization/intro.mdx
View File

@ -14,7 +14,7 @@ pagination_next: customization/creating-a-chart
# Customization - Introduction
This tutorial provides an introduction to customizing Lightweight Chart's appearance and functionality. It is not meant as an exhaustive tutorial but rather as a guided tour on how and where to apply options within the API to adjust specific parts of the chart. Along the way, we will provide links to the API documentation which outline the full set of options available for each part of the chart. It is highly recommended that you explore these API links to discover the wide range of possible customization and feature flags contained within Lightweight Charts.
This tutorial provides an introduction to customizing Lightweight Charts™ appearance and functionality. It is not meant as an exhaustive tutorial but rather as a guided tour on how and where to apply options within the API to adjust specific parts of the chart. Along the way, we will provide links to the API documentation which outline the full set of options available for each part of the chart. It is highly recommended that you explore these API links to discover the wide range of possible customization and feature flags contained within Lightweight Charts™.
## What we will be building
@ -72,7 +72,7 @@ The tutorial will assume that you've already read the [Getting Started](/docs) s
## How to set up the example so you can follow along
This guide makes use of a single HTML file which you can download to your computer and run in the browser without the need for any build steps or web servers. The only thing required is an active internet connection such that the Lightweight Charts library can be downloaded from the CDN.
This guide makes use of a single HTML file which you can download to your computer and run in the browser without the need for any build steps or web servers. The only thing required is an active internet connection such that the Lightweight Charts™ library can be downloaded from the CDN.
Provided below is the 'starting point' file for the guide which is a simple HTML page scaffolded out with a single div element (`#container`) and a JS function to generate the sample data set. **At this point, you won't see anything on the page until we add the chart in the next step.**

4
website/tutorials/customization/price-format.mdx
View File

@ -38,7 +38,7 @@ const myPriceFormatter = Intl.NumberFormat(currentLocale, {
}).format;
```
First, we are grabbing the primary locale for the current user which will pass into the `Intl.NumberFormat` constructor. The constructor takes a second argument for options where we can specify the `style` and `currency` properties. The instance created contains a `format` method which we can then pass into Lightweight Charts 9as shown below).
First, we are grabbing the primary locale for the current user which will pass into the `Intl.NumberFormat` constructor. The constructor takes a second argument for options where we can specify the `style` and `currency` properties. The instance created contains a `format` method which we can then pass into Lightweight Charts™ as shown below).
## Setting the price formatter
@ -59,7 +59,7 @@ Price formatters can also be applied to each series individually by adjusting th
## Built-in price formatting
Lightweight Charts includes a few options to adjust the built-in price formatting which can be see here: [PriceFormatBuiltIn](/docs/api/interfaces/PriceFormatBuiltIn).
Lightweight Charts™ includes a few options to adjust the built-in price formatting which can be see here: [PriceFormatBuiltIn](/docs/api/interfaces/PriceFormatBuiltIn).
## Result

2
website/tutorials/how_to/inverted-price-scale.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Inverted Price Scale
// Lightweight Charts™ Example: Inverted Price Scale
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/inverted-price-scale
// remove-end

2
website/tutorials/how_to/legend-3line.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Legend 3 Lines
// Lightweight Charts™ Example: Legend 3 Lines
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/legends
// remove-end

2
website/tutorials/how_to/legend.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Legend
// Lightweight Charts™ Example: Legend
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/legends
// remove-end

2
website/tutorials/how_to/legends.mdx
View File

@ -21,7 +21,7 @@ import VersionWarningAdmonition from "@site/src/components/VersionWarningAdmonit
displayVersionMessage
/>
Lightweight charts doesn't include a built-in legend feature, however it is something which can be added
Lightweight Charts™ doesn't include a built-in legend feature, however it is something which can be added
to your chart by following the examples presented below.
## How to

2
website/tutorials/how_to/no-time-scale.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: No Time Scale
// Lightweight Charts™ Example: No Time Scale
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/example
// remove-end

2
website/tutorials/how_to/price-and-volume.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Price and Volume
// Lightweight Charts™ Example: Price and Volume
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-and-volume
// remove-end

2
website/tutorials/how_to/price-line.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Price Lines
// Lightweight Charts™ Example: Price Lines
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-line
// remove-end

2
website/tutorials/how_to/price-line.mdx
View File

@ -34,7 +34,7 @@ You can see a full [working example](#full-example) below.
## Tips
You may wish to disable the default price line drawn by Lightweight Charts
You may wish to disable the default price line drawn by Lightweight Charts™
for the last value in the series (and it's label). You can do this by adjusting the
series options as follows:

2
website/tutorials/how_to/series-markers.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Series Markers
// Lightweight Charts™ Example: Series Markers
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/series-markers
// remove-end

2
website/tutorials/how_to/tooltip-floating.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Floating Tooltip
// Lightweight Charts™ Example: Floating Tooltip
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/tooltips
// remove-end

2
website/tutorials/how_to/tooltip-magnifier.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Magnifier Tooltip
// Lightweight Charts™ Example: Magnifier Tooltip
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/tooltips
// remove-end

2
website/tutorials/how_to/tooltip-tracking.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Tracking Tooltip
// Lightweight Charts™ Example: Tracking Tooltip
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/tooltips
// remove-end

2
website/tutorials/how_to/tooltips.mdx
View File

@ -21,7 +21,7 @@ import VersionWarningAdmonition from "@site/src/components/VersionWarningAdmonit
displayVersionMessage
/>
Lightweight charts doesn't include a built-in tooltip feature, however it is something which can be added
Lightweight Charts™ doesn't include a built-in tooltip feature, however it is something which can be added
to your chart by following the examples presented below.
## How to

2
website/tutorials/how_to/two-price-scales.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Two Price Scales
// Lightweight Charts™ Example: Two Price Scales
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/two-price-scales
// remove-end

2
website/tutorials/how_to/two-price-scales.mdx
View File

@ -9,7 +9,7 @@ keywords:
- scale
---
It is possible to have two price scales visible on a Lightweight Chart,
It is possible to have two price scales visible on a Lightweight Charts™,
namely one on the right side (default) and another on the left. This example
shows how to configure your chart to contain two price scales.

2
website/tutorials/how_to/watermark-advanced.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Watermark Advanced
// Lightweight Charts™ Example: Watermark Advanced
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/watermark
// remove-end

2
website/tutorials/how_to/watermark-simple.js
View File

@ -1,5 +1,5 @@
// remove-start
// Lightweight Charts Example: Watermark Simple
// Lightweight Charts™ Example: Watermark Simple
// https://tradingview.github.io/lightweight-charts/tutorials/how_to/watermark
// remove-end

2
website/tutorials/how_to/watermark.mdx
View File

@ -9,7 +9,7 @@ keywords:
- example
---
Lightweight charts has a built-in feature for displaying simple text watermarks on your chart.
Lightweight Charts™ has a built-in feature for displaying simple text watermarks on your chart.
This example shows how to configure and add this simple text watermark to your chart.
If you are looking to add a more complex watermark then have a look at the [advanced watermark example](#advanced-watermark-example)
included below.

4
website/tutorials/index.mdx
View File

@ -37,7 +37,7 @@ import VersionWarningAdmonition from "@site/src/components/VersionWarningAdmonit
## Framework integrations
This section contains some tutorials how to use Lightweight Charts with some popular frameworks.
This section contains some tutorials how to use Lightweight Charts™ with some popular frameworks.
<CardLinkList
items={[
@ -94,6 +94,6 @@ export const ExamplesList = () => {
:::tip
More examples can be viewed on the [Lightweight Charts product page](https://www.tradingview.com/lightweight-charts/).
More examples can be viewed on the [Lightweight Charts™ product page](https://www.tradingview.com/lightweight-charts/).
:::

6
website/tutorials/react/01-simple.mdx
View File

@ -9,11 +9,11 @@ hide_table_of_contents: true
The following only describes a relatively simple example that only renders an [area series](/docs/series-types#area) that could be tweaked to render any other type of [series](/docs/series-types).
For a more complete scenario where you could wrap Lightweight Charts into a component having sub components, please consult this [example](./advanced).
For a more complete scenario where you could wrap Lightweight Charts™ into a component having sub components, please consult this [example](./advanced).
:::
On this page you will learn how to easily use Lightweight Charts with React.
On this page you will learn how to easily use Lightweight Charts™ with React.
## Preparing your project
@ -35,7 +35,7 @@ This will create a web page accessible by default on <http://localhost:1234/>.
## Creating a charting component
The example _React component_ on this page may not fit your requirements completely. Creating a general purpose declarative wrapper for Lightweight Charts' imperative API is a challenge, but hopefully you can adapt this example to your use case.
The example _React component_ on this page may not fit your requirements completely. Creating a general purpose declarative wrapper for Lightweight Charts™ imperative API is a challenge, but hopefully you can adapt this example to your use case.
:::info

4
website/tutorials/react/02-advanced.mdx
View File

@ -15,13 +15,13 @@ If you want to consult a simpler approach please consult this [example](./simple
:::warning
By following the steps below we assume you're familiar with Lightweight Charts, how to set up a project using it and how to render a chart.
By following the steps below we assume you're familiar with Lightweight Charts™, how to set up a project using it and how to render a chart.
If not, please follow this [guide](./simple).
:::
If you're familiar with Lightweight Charts you probably already know that a _Chart_ is a container that can contain one or more [_Series_](/docs/series-types).
If you're familiar with Lightweight Charts™ you probably already know that a _Chart_ is a container that can contain one or more [_Series_](/docs/series-types).
Each _Series_ has its own options (for instance [AreaStyleOptions](/docs/api/interfaces/AreaStyleOptions), [LineStyleOptions](/docs/api/interfaces/LineStyleOptions), etc) in addition to [price](/docs/price-scale) and/or [time](/docs/time-scale) scale.
Based on this principle, one could easily imagine having a main component _Chart_ that could have some _Series_ children that could themselves have other children and so on.

16
website/tutorials/vuejs/01-wrapper.mdx
View File

@ -1,7 +1,7 @@
---
title: Vue.js - Wrapper Component
description:
A simple example of how to use Lightweight Charts within the Vue.js framework.
A simple example of how to use Lightweight Charts™ within the Vue.js framework.
pagination_prev: null
pagination_next: null
keywords:
@ -23,7 +23,7 @@ a starting point and could be tweaked further using our extensive
:::
This guide will focus on the key concepts required to get Lightweight Charts
This guide will focus on the key concepts required to get Lightweight Charts™
running within a Vue component. Please note this guide is not intended as a
complete step-by-step tutorial. The example Vue components can be found at the
[bottom](#complete-sample-code) of this guide.
@ -44,7 +44,7 @@ The ability to:
- enable automatic resizing of the chart when the browser is resized.
The example may not fit your requirements completely. Creating a general-purpose
declarative wrapper for Lightweight Charts' imperative API is a challenge, but
declarative wrapper for Lightweight Charts™ imperative API is a challenge, but
hopefully, you can adapt this example to your use case.
### Component showcase
@ -76,7 +76,7 @@ The Vue component could be used within any Vue setup, you can learn more on the
Vue documentation site:
[Ways of Vue](https://vuejs.org/guide/extras/ways-of-using-vue.html)
## Integrating Lightweight Charts with Vue
## Integrating Lightweight Charts™ with Vue
### Avoid using `Refs` for storing API instances
@ -88,7 +88,7 @@ functionality.
When Vue wraps an object in a reference object, it modifies the object (to
enable reactivity) in such a way that it interferes with the internal logic of
the Lightweight Chart. This can lead to unexpected behaviour. If you really need
the Lightweight Charts™. This can lead to unexpected behaviour. If you really need
to use a [`ref`](https://vuejs.org/api/reactivity-core.html#ref) then please
consider using
[`shallowRef`](https://vuejs.org/api/reactivity-advanced.html#shallowref)
@ -115,7 +115,7 @@ the script.
### Use the `onMounted` lifecycle hook to create the chart
Lightweight Charts requires an html element to use as its container, you can
Lightweight Charts™ requires an html element to use as its container, you can
create a simple div element within the component's `template` and ask Vue to
create a reference to that element by adding the `ref="chartContainer"`
attribute to the div element and the corresponding variable within the script
@ -125,7 +125,7 @@ The ideal time to create the chart is during the `mounted` lifecycle hook
provided by the Vue component. The container div will be created and ready for
use at this stage. Within the
[`onMounted`](https://vuejs.org/api/composition-api-lifecycle.html#onmounted)
hook we can call Lightweight Charts' [`createChart`](/docs/api#createchart)
hook we can call Lightweight Charts™ [`createChart`](/docs/api#createchart)
constructor and pass it the value of the container reference (which is the div
element).
@ -172,7 +172,7 @@ the saved chart instance.
A simple way to provide customisation of the chart to the component's consumers
is to create component properties for the options you wish to be customised.
Lightweight Charts has a variety of customisation options which can be applied
Lightweight Charts™ has a variety of customisation options which can be applied
through the [`applyOptions`](/docs/api/interfaces/IChartApi#applyOptions) method
on an Api instance (such as [IChartApi](/docs/api/interfaces/IChartApi),
[ISeriesApi](/docs/api/interfaces/ISeriesApi),

2
website/tutorials/vuejs/assets/app.vue
View File

@ -12,7 +12,7 @@ import { ref } from 'vue';
import LWChart from './components/options-api/LWChart.vue';
/**
* Generates sample data for the lightweight chart
* Generates sample data for the Lightweight Charts example
* @param {Boolean} ohlc Whether generated dat should include open, high, low, and close values
* @returns {Array} sample data
*/

6
website/tutorials/vuejs/assets/composition-api.vue
View File

@ -41,7 +41,7 @@ function getChartSeriesConstructorName(type) {
return `add${type.charAt(0).toUpperCase() + type.slice(1)}Series`;
}
// Lightweight Chart instances are stored as normal JS variables
// Lightweight Charts instances are stored as normal JS variables
// If you need to use a ref then it is recommended that you use `shallowRef` instead
let series;
let chart;
@ -110,10 +110,10 @@ onUnmounted(() => {
* If an options property is changed then we will apply those options
* on top of any existing options previously set (since we are using the
* `applyOptions` method).
*
*
* If there is a change to the chart type, then the existing series is removed
* and the new series is created, and assigned the data.
*
*
*/
watch(
() => props.autosize,

20
website/tutorials/webcomponents/01-custom-element.mdx
View File

@ -1,7 +1,7 @@
---
title: Web Components - Custom Element
description:
A simple example of how to use Lightweight Charts within the Web component
A simple example of how to use Lightweight Charts™ within the Web component
custom element.
pagination_prev: null
pagination_next: null
@ -22,7 +22,7 @@ a starting point, and could be tweaked further using our extensive
:::
This guide will focus on the key concepts required to get Lightweight Charts
This guide will focus on the key concepts required to get Lightweight Charts™
running within a Vanilla JS web component (using
[custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)).
Please note this guide is not intended as a complete step-by-step tutorial. The
@ -48,7 +48,7 @@ The ability to:
- enable automatic resizing of the chart when the browser is resized.
The example may not fit your requirements completely. Creating a general-purpose
declarative wrapper for Lightweight Charts' imperative API is a challenge, but
declarative wrapper for Lightweight Charts™ imperative API is a challenge, but
hopefully, you can adapt this example to your use case.
### Component showcase
@ -74,7 +74,7 @@ encapsulate functionality within custom elements.
[Custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
make use of the standard web languages `html`, `css`, and `js` which means that
there aren't many specific changes, or extra knowledge, required to get
Lightweight Charts working within a custom element.
Lightweight Charts™ working within a custom element.
The process of creating a chart is essentially the same as when using the
library normally, except that we are encapsulating all the `html`, `css`, and
@ -160,8 +160,8 @@ class LightweightChartWC extends HTMLElement {
}
```
Finally, we can now create the chart using Lightweight Charts. Depending on your
build process, you may either need to import Lightweight Charts, or access it
Finally, we can now create the chart using Lightweight Charts™. Depending on your
build process, you may either need to import Lightweight Charts™, or access it
from the global scope (if loaded as a standalone script). To create the chart,
we call the [`createChart`](/docs/api#createchart) constructor function, passing
our container element as the first argument. The returned variable will be a
@ -210,7 +210,7 @@ and the autosize flag which enables automatic resizing of the chart when the
window is resized. We will be using properties to provide the interfaces for
setting the series data, and options for the chart. Additionally, the IChartApi
instance will be accessable via the `chart` property such that the consumer has
full access to the entire API provided by Lightweight Charts.
full access to the entire API provided by Lightweight Charts™.
### Attributes
@ -412,7 +412,7 @@ follows (using JSON notation):
The IChartApi instance will be accessible via the `chart` property on the custom
element. This can be used by the consumer of the custom element to fully control
the Lightweight Chart within the element.
the chart within the element.
```js
// Get a reference to an instance of the custom element on the page
@ -434,7 +434,7 @@ the script is loaded and executed, so all you need to do is include the script
tag on the page.
Depending on your build step for your page, you may either need to import
Lightweight Charts via an import statement, or access the library via the global
Lightweight Charts™ via an import statement, or access the library via the global
variable defined when using the standalone script version.
```js
@ -467,7 +467,7 @@ information.
### Standalone script example html file
If you are loading the Lightweight Charts library via the standalone script
If you are loading the Lightweight Charts™ library via the standalone script
version then you can also load the custom element via a script tag (see above
section for more info) and construct your html page as follows:

8
website/versioned_docs/version-3.8/android.md
View File

@ -1,12 +1,12 @@
---
id: android
description: You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
description: You can use Lightweight Charts™ inside an Android application. To use Lightweight Charts™ in that context, you can use our Android wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
keywords:
- charts
- android
- canvas
- charting library
- charting
- charting
- html5 charts
- financial charting library
sidebar_position: 7
@ -15,10 +15,10 @@ sidebar_position: 7
# Android wrapper
:::note
You can find the source code of the Lightweight Charts Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android).
You can find the source code of the Lightweight Charts™ Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android).
:::
You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
You can use Lightweight Charts™ inside an Android application. To use Lightweight Charts™ in that context, you can use our Android wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
## Installation

8
website/versioned_docs/version-3.8/ios.md
View File

@ -1,12 +1,12 @@
---
id: ios
description: You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
description: You can use Lightweight Charts™ inside an iOS application. To use Lightweight Charts™ in that context, you can use our iOS wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
keywords:
- charts
- iOS
- canvas
- charting library
- charting
- charting
- html5 charts
- financial charting library
sidebar_position: 6
@ -15,10 +15,10 @@ sidebar_position: 6
# iOS wrapper
:::note
You can find the source code of the Lightweight Charts iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS).
You can find the source code of the Lightweight Charts™ iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS).
:::
You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
You can use Lightweight Charts™ inside an iOS application. To use Lightweight Charts™ in that context, you can use our iOS wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
## Installation

2
website/versioned_docs/version-3.8/migrations/from-v2-to-v3.md
View File

@ -1,6 +1,6 @@
# From v2 to v3
Lightweight charts library 3.0 announces the major improvements: supporting two price scales and improving the time scale API.
Lightweight Charts™ library 3.0 announces the major improvements: supporting two price scales and improving the time scale API.
In order of keep the API clear and consistent, we decided to allow breaking change of the API.
In this document you can find the migration guide from the previous version to 3.0.

2
website/versioned_docs/version-3.8/release-notes.md
View File

@ -17,7 +17,7 @@ sidebar_position: 8
## 3.8.0
We're happy to announce the next release of Lightweight Charts library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own [documentation website](https://tradingview.github.io/lightweight-charts/) that replaces the documentation in the repository. Check it out and share your feedback in [this discussion thread](https://github.com/tradingview/lightweight-charts/discussions/921).
We're happy to announce the next release of Lightweight Charts™ library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own [documentation website](https://tradingview.github.io/lightweight-charts/) that replaces the documentation in the repository. Check it out and share your feedback in [this discussion thread](https://github.com/tradingview/lightweight-charts/discussions/921).
**Enhancement**

6
website/versioned_docs/version-4.0/android.md
View File

@ -1,6 +1,6 @@
---
id: android
description: You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
description: You can use Lightweight Charts™ inside an Android application. To use Lightweight Charts™ in that context, you can use our Android wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
keywords:
- charts
- android
@ -15,7 +15,7 @@ sidebar_position: 7
# Android wrapper
:::note
You can find the source code of the Lightweight Charts Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android).
You can find the source code of the Lightweight Charts™ Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android).
:::
:::info
@ -24,7 +24,7 @@ This wrapper is currently still using `v3.8.0`. This will be updated to `v4.0.0`
:::
You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
You can use Lightweight Charts™ inside an Android application. To use Lightweight Charts™ in that context, you can use our Android wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
## Installation

6
website/versioned_docs/version-4.0/ios.md
View File

@ -1,6 +1,6 @@
---
id: ios
description: You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
description: You can use Lightweight Charts™ inside an iOS application. To use Lightweight Charts™ in that context, you can use our iOS wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
keywords:
- charts
- iOS
@ -15,7 +15,7 @@ sidebar_position: 6
# iOS wrapper
:::note
You can find the source code of the Lightweight Charts iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS).
You can find the source code of the Lightweight Charts™ iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS).
:::
:::info
@ -24,7 +24,7 @@ This wrapper is currently still using `v3.8.0`. This will be updated to `v4.0.0`
:::
You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
You can use Lightweight Charts™ inside an iOS application. To use Lightweight Charts™ in that context, you can use our iOS wrapper, which will allow you to interact with Lightweight Charts™ library, which will be rendered in a web view.
## Installation

2
website/versioned_docs/version-4.0/migrations/from-v2-to-v3.md
View File

@ -1,6 +1,6 @@
# From v2 to v3
Lightweight charts library 3.0 announces the major improvements: supporting two price scales and improving the time scale API.
Lightweight Charts™ library 3.0 announces the major improvements: supporting two price scales and improving the time scale API.
In order of keep the API clear and consistent, we decided to allow breaking change of the API.
In this document you can find the migration guide from the previous version to 3.0.

6
website/versioned_docs/version-4.0/release-notes.md
View File

@ -19,7 +19,7 @@ sidebar_position: 8
Long overdue as it’s been nearly 1 year since our last major update, but behold before all the changes that have happened over the last 12 months.
In total, more than 20 tickets have been addressed with one of the most important ones being **fancy-canvas** – the library we use to configure HTML canvas in Lightweight Charts.
In total, more than 20 tickets have been addressed with one of the most important ones being **fancy-canvas** – the library we use to configure HTML canvas in Lightweight Charts™.
Please view the migration guide here: [Migrating from v3 to v4](./migrations/from-v3-to-v4).
@ -81,7 +81,7 @@ Please view the migration guide here: [Migrating from v3 to v4](./migrations/fro
- Crosshair label text appears on the chart during initial render | [#1255](https://github.com/tradingview/lightweight-charts/issues/1255)
- Small text artefacts from the crosshair no longer appear on the time axis before any interaction with the chart.
As always, we thank you for your support and help in making Lightweight Charts the best product on the financial web. And a big shout out to our hero contributors [thanhlmm](https://github.com/thanhlmm), [CommanderRoot](https://github.com/CommanderRoot), [samhainsamhainsamhain](https://github.com/samhainsamhainsamhain) & colleague [Nipheris](https://github.com/Nipheris)!
As always, we thank you for your support and help in making Lightweight Charts™ the best product on the financial web. And a big shout out to our hero contributors [thanhlmm](https://github.com/thanhlmm), [CommanderRoot](https://github.com/CommanderRoot), [samhainsamhainsamhain](https://github.com/samhainsamhainsamhain) & colleague [Nipheris](https://github.com/Nipheris)!
You can always send us your feedback via GitHub.
We look forward to hearing from you! And as always, happy trading!
Team TradingView
@ -90,7 +90,7 @@ See [issues assigned to this version's milestone](https://github.com/tradingview
## 3.8.0
We're happy to announce the next release of Lightweight Charts library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own [documentation website](https://tradingview.github.io/lightweight-charts/) that replaces the documentation in the repository. Check it out and share your feedback in [this discussion thread](https://github.com/tradingview/lightweight-charts/discussions/921).
We're happy to announce the next release of Lightweight Charts™ library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own [documentation website](https://tradingview.github.io/lightweight-charts/) that replaces the documentation in the repository. Check it out and share your feedback in [this discussion thread](https://github.com/tradingview/lightweight-charts/discussions/921).
**Enhancement**