-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Creating website versioned docs the version - Bumping lightweight-charts version on the website At this stage it won't be possible to build a website until the package will be published though. But this-is-fine.png
- Loading branch information
Showing
12 changed files
with
976 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
--- | ||
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. | ||
keywords: | ||
- charts | ||
- android | ||
- canvas | ||
- charting library | ||
- charting | ||
- html5 charts | ||
- financial charting library | ||
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 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 | ||
|
||
:::info | ||
Requires minSdkVersion 21, and installed WebView with support of ES6 | ||
::: | ||
|
||
In `/build.gradle` | ||
|
||
```groovy | ||
allprojects { | ||
repositories { | ||
google() | ||
mavenCentral() | ||
} | ||
} | ||
``` | ||
|
||
In `/gradle_module/build.gradle` | ||
|
||
```groovy | ||
dependencies { | ||
//... | ||
implementation 'com.tradingview:lightweightcharts:3.7.0' | ||
} | ||
``` | ||
|
||
## Usage | ||
|
||
Add view to the layout. | ||
|
||
```xml | ||
<androidx.constraintlayout.widget.ConstraintLayout | ||
android:layout_width="match_parent" | ||
android:layout_height="match_parent"> | ||
|
||
<com.tradingview.lightweightcharts.view.ChartsView | ||
android:id="@+id/charts_view" | ||
android:layout_width="0dp" | ||
android:layout_height="0dp" | ||
app:layout_constraintBottom_toBottomOf="parent" | ||
app:layout_constraintLeft_toLeftOf="parent" | ||
app:layout_constraintRight_toRightOf="parent" | ||
app:layout_constraintTop_toTopOf="parent" /> | ||
|
||
</androidx.constraintlayout.widget.ConstraintLayout> | ||
``` | ||
|
||
Configure the chart layout. | ||
|
||
```kotlin | ||
charts_view.api.applyOptions { | ||
layout = layoutOptions { | ||
backgroundColor = Color.LTGRAY.toIntColor() | ||
textColor = Color.BLACK.toIntColor() | ||
} | ||
localization = localizationOptions { | ||
locale = "ru-RU" | ||
priceFormatter = PriceFormatter(template = "{price:#2:#3}$") | ||
timeFormatter = TimeFormatter( | ||
locale = "ru-RU", | ||
dateTimeFormat = DateTimeFormat.DATE_TIME | ||
) | ||
} | ||
} | ||
``` | ||
|
||
Add any series to the chart and store a reference to it. | ||
|
||
```kotlin | ||
lateinit var histogramSeries: SeriesApi | ||
charts_view.api.addHistogramSeries( | ||
onSeriesCreated = { series -> | ||
histogramSeries = series | ||
} | ||
) | ||
``` | ||
|
||
Add data to the series. | ||
|
||
```kotlin | ||
val data = listOf( | ||
HistogramData(Time.BusinessDay(2019, 6, 11), 40.01f), | ||
HistogramData(Time.BusinessDay(2019, 6, 12), 52.38f), | ||
HistogramData(Time.BusinessDay(2019, 6, 13), 36.30f), | ||
HistogramData(Time.BusinessDay(2019, 6, 14), 34.48f), | ||
WhitespaceData(Time.BusinessDay(2019, 6, 15)), | ||
WhitespaceData(Time.BusinessDay(2019, 6, 16)), | ||
HistogramData(Time.BusinessDay(2019, 6, 17), 41.50f), | ||
HistogramData(Time.BusinessDay(2019, 6, 18), 34.82f) | ||
) | ||
histogramSeries.setData(data) | ||
``` | ||
|
||
## How to run the provided example | ||
|
||
The [GitHub repository](https://github.com/tradingview/lightweight-charts-android) for lightweight-charts-android contains an example of the library in action. | ||
You can run the example (LighweightCharts.app) by cloning the repository and opening it in Android Studio. You will need to have [NodeJS/NPM](https://nodejs.org/) installed. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,159 @@ | ||
--- | ||
slug: / | ||
id: intro | ||
sidebar_position: 0 | ||
--- | ||
|
||
# Getting started | ||
|
||
## Installation | ||
|
||
The first thing you need to do to use `lightweight-charts` is to install it from [npm](https://www.npmjs.com/): | ||
|
||
```console | ||
npm install --save lightweight-charts | ||
``` | ||
|
||
_Note that the package is shipped with TypeScript declarations, so you can easily use it within TypeScript code._ | ||
|
||
## Creating a chart | ||
|
||
Once the library has been installed in your repo you're ready to create your first chart. | ||
|
||
First of all, in a file where you would like to create a chart you need to import the library: | ||
|
||
```js | ||
import { createChart } from 'lightweight-charts'; | ||
``` | ||
|
||
[`createChart`](/api/index.md#createchart) is the entry-point for creating charts. You can use it to create as many charts as you need: | ||
|
||
```js | ||
import { createChart } from 'lightweight-charts'; | ||
|
||
// ... | ||
|
||
// somewhere in your code | ||
const firstChart = createChart(firstContainer); | ||
const secondChart = createChart(secondContainer); | ||
``` | ||
|
||
The result of this function is a [`IChartApi`](/api/interfaces/IChartApi.md) object, which you need to use to work with a chart instance. | ||
|
||
## Creating a series | ||
|
||
Once your chart is created it is ready to display data. | ||
|
||
The basic primitive to display a data is [a series](/api/interfaces/ISeriesApi.md). | ||
There are different types of series: | ||
|
||
- Area | ||
- Bar | ||
- Baseline | ||
- Candlestick | ||
- Histogram | ||
- Line | ||
|
||
To create a series with desired type you need to use appropriate method from [`IChartApi`](/api/interfaces/IChartApi.md). | ||
All of them have the same naming `add<type>Series`, where `<type>` is a type of a series you'd like to create: | ||
|
||
```js | ||
import { createChart } from 'lightweight-charts'; | ||
|
||
const chart = createChart(container); | ||
|
||
const areaSeries = chart.addAreaSeries(); | ||
const barSeries = chart.addBarSeries(); | ||
const baselineSeries = chart.addBaselineSeries(); | ||
// ... and so on | ||
``` | ||
|
||
Please look at [this page](/series-types.md) for more information about different series types. | ||
|
||
Note that **a series cannot be transferred from one type to another one** since different series types have different data and options types. | ||
|
||
## Setting and updating a data | ||
|
||
Once your chart and series are created it's time to set data to the series. | ||
|
||
Note that regardless of the series type, the API calls are the same (the type of the data might be different though). | ||
|
||
### Setting the data to a series | ||
|
||
To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](/api/interfaces/ISeriesApi.md#setdata) method: | ||
|
||
```js | ||
import { createChart } from 'lightweight-charts'; | ||
|
||
const chart = createChart(container); | ||
|
||
const areaSeries = chart.addAreaSeries(); | ||
areaSeries.setData([ | ||
{ time: '2018-12-22', value: 32.51 }, | ||
{ time: '2018-12-23', value: 31.11 }, | ||
{ time: '2018-12-24', value: 27.02 }, | ||
{ time: '2018-12-25', value: 27.32 }, | ||
{ time: '2018-12-26', value: 25.17 }, | ||
{ time: '2018-12-27', value: 28.89 }, | ||
{ time: '2018-12-28', value: 25.46 }, | ||
{ time: '2018-12-29', value: 23.92 }, | ||
{ time: '2018-12-30', value: 22.68 }, | ||
{ time: '2018-12-31', value: 22.67 }, | ||
]); | ||
|
||
const candlestickSeries = chart.addCandlestickSeries(); | ||
candlestickSeries.setData([ | ||
{ time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, | ||
{ time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, | ||
{ time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, | ||
{ time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, | ||
{ time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, | ||
{ time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, | ||
{ time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, | ||
{ time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, | ||
{ time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, | ||
{ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 }, | ||
]); | ||
``` | ||
|
||
It's pretty easy, isn't it? That's it, your chart is ready to be displayed on the page: | ||
|
||
![First simple chart](/img/first-chart.png "First simple chart") | ||
|
||
### Updating the data in a series | ||
|
||
In a case when your data is updated (e.g. real-time updates) you might want to update the chart as well. | ||
|
||
But using [`ISeriesApi.setData`](/api/interfaces/ISeriesApi.md#setdata) very often might affect the performance and we do not recommend to do this. | ||
Also it replaces all series data with the new one, and probably this is not what you're looking for. | ||
|
||
Thus, to update the data you can use a method [`ISeriesApi.update`](/api/interfaces/ISeriesApi.md#update). | ||
It allows you to update the last data item or add a new one much faster without affecting the performance: | ||
|
||
```js | ||
import { createChart } from 'lightweight-charts'; | ||
|
||
const chart = createChart(container); | ||
|
||
const areaSeries = chart.addAreaSeries(); | ||
areaSeries.setData([ | ||
// ... other data items | ||
{ time: '2018-12-31', value: 22.67 }, | ||
]); | ||
|
||
const candlestickSeries = chart.addCandlestickSeries(); | ||
candlestickSeries.setData([ | ||
// ... other data items | ||
{ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 }, | ||
]); | ||
|
||
// sometime later | ||
|
||
// update the most recent bar | ||
areaSeries.update({ time: '2018-12-31', value: 25 }); | ||
candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 }); | ||
|
||
// creating the new bar | ||
areaSeries.update({ time: '2019-01-01', value: 20 }); | ||
candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 }); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
--- | ||
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. | ||
keywords: | ||
- charts | ||
- iOS | ||
- canvas | ||
- charting library | ||
- charting | ||
- html5 charts | ||
- financial charting library | ||
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 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 | ||
|
||
:::info | ||
Requires iOS 10.0+ | ||
::: | ||
|
||
### CocoaPods | ||
|
||
[CocoaPods](https://cocoapods.org) is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate LightweightCharts into your Xcode project using CocoaPods, specify it in your `Podfile`: | ||
|
||
```ruby | ||
pod 'LightweightCharts', '~> 3.7.0' | ||
``` | ||
|
||
### Swift Package Manager | ||
|
||
The [Swift Package Manager](https://swift.org/package-manager/) is a tool for automating the distribution of Swift code and is integrated into the `swift` compiler. | ||
|
||
Once you have your Swift package set up, adding LightweightCharts as a dependency is as easy as adding it to the `dependencies` value of your `Package.swift`. | ||
|
||
```swift | ||
dependencies: [ | ||
.package(url: "https://github.com/tradingview/LightweightChartsIOS", .upToNextMajor(from: "3.7.0")) | ||
] | ||
``` | ||
|
||
## Usage | ||
|
||
Once the library has been installed in your repo, you're ready to create your first chart. | ||
|
||
First of all, in a file where you would like to create a chart, you need to import the library: | ||
|
||
```swift | ||
import LightweightCharts | ||
``` | ||
|
||
Create instance of LightweightCharts, which is a subclass of UIView, and add it to your view. | ||
|
||
```swift | ||
var chart: LightweightCharts! | ||
|
||
// ... | ||
chart = LightweightCharts() | ||
view.addSubview(chart) | ||
// ... setup layout | ||
``` | ||
|
||
Add any series to the chart and store a reference to it. | ||
|
||
```swift | ||
var series: BarSeries! | ||
|
||
// ... | ||
series = chart.addBarSeries(options: nil) | ||
``` | ||
|
||
Add data to the series. | ||
|
||
```swift | ||
let data = [ | ||
BarData(time: .string("2018-10-19"), open: 180.34, high: 180.99, low: 178.57, close: 179.85), | ||
BarData(time: .string("2018-10-22"), open: 180.82, high: 181.40, low: 177.56, close: 178.75), | ||
BarData(time: .string("2018-10-23"), open: 175.77, high: 179.49, low: 175.44, close: 178.53), | ||
BarData(time: .string("2018-10-24"), open: 178.58, high: 182.37, low: 176.31, close: 176.97), | ||
BarData(time: .string("2018-10-25"), open: 177.52, high: 180.50, low: 176.83, close: 179.07) | ||
] | ||
|
||
// ... | ||
series.setData(data: data) | ||
``` | ||
|
||
## How to run the provided example | ||
|
||
The [GitHub repository](https://github.com/tradingview/LightweightChartsIOS) for LightweightChartsIOS contains an example of the library in action. To run the example, start by cloning the repository, go to the _Example_ directory, and then run | ||
|
||
```sh | ||
pod install | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
label: "Migration guides" | ||
position: 5 |
Oops, something went wrong.