Marcius Studio
Published in

Marcius Studio

Financial charts for your application

Searching the right charts takes time and bears a lot of questions. Today I want to share my experience in choosing financial charts to save your time and effort.

In the article I will consider three main libraries for me, make a comparison and add comments from personal experience.

Статья на русском языке: https://habr.com/ru/post/519676/

Hello World!

It was necessary to connect charts to the application. As a result, I use 3 charts, which we will talk about in the article. They are all free. Two of them are open source lightweight-charts, trading-vue-js (on Vuejs) and one is proprietary charting_library.

Introduction

Each chart solves its own problem. Let’s start with an overview and comparison.

Libraries

lightweight-charts

The essence follows from the name. These are lightweight charts that solve simple problems. The library is open source, well-documented and constantly updated. If you need to quickly create chart, visualize an algorithm or some data, then this is the most suitable choice.

Anyone familiar with the TradingView platform charts will see a light-version of the classic charts.

The following charts are available from the “box”: line, area, bars, candles and histogram. Charts can be combined. It is possible to display trades, place orders and many additional settings. There is a CDN version and a package for Nodejs.

Connection example:

$ npm install lightweight-chartsimport { createChart } from 'lightweight-charts';  const chart = createChart(document.body, { width: 400, height: 300 }); 
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
]);

Demo: https://ru.tradingview.com/lightweight-charts/
Documentation: https://github.com/tradingview/lightweight-charts/blob/master/docs/README.md
License: Apache License, Version 2.0
Version at the time of the article: 3.1.5
Community: https://discord.com/invite/E6UthXZ

charting_library

Classic TradingView chart that you can use for free. This option is used on most exchanges and in the TV service itself. It is suitable if you need to use powerful functionality with technical analysis for your application out of the box.

The library has closed access. Access is obtained in several stages:

  1. Filling out an application on the site and waiting for a response (from two weeks)
  2. Signing a contract
  3. Accessing a repository on GitHub

Optionally, you can connect a widget with limited settings.

Minus is the limited API, cannot be scale. Many questions arise from the technical side, so this is a topic for a separate article.

There are many nuances with the technical side, so this is a topic for a separate article.

I use charting_library in my trading terminal application. Looks “expensive-rich” and familiar to users.

Demo: https://charting-library.tradingview.com/
Documentation: https://github.com/tradingview/charting_library/wiki (if there is no access there will be a 404 error)
Community: https://discord.com/invite/E6UthXZ

TradingVue

A fairly young project on which really cool graphics are made. They are visually similar to the classic TradingView, with license differences (MIT), full customization, and a simple API. You can draw whatever you want on these graphs. High processing speed 20ms for 1000 candles. A scripting language is available — JavaScript, there is a playground. The library is written in Vuejs, so those who are familiar with the framework will understand everything.

Developer quote:

If you create trading software — this lib is probably for you. If you like to make custom indicators and think out of the box — this lib is most likely for you. And if you miss usability of TradingView.com in other open-source libraries and can’t stand it — you are definetly in the right place!

Minus is the small number of plugins to expand the functionality. They are called overlays within the library. Available tvjs-overlays extensions.

In a dialogue with the developer, it turned out that the priority is in the development of functionality, so there is no way to devote time to plugins yet. Pull requests are welcome.

Connection example:

$ npm i trading-vue-js<template>
<trading-vue :data="this.$data"></trading-vue>
</template>
<script>import TradingVue from 'trading-vue-js'export default {
name: 'app',
components: { TradingVue },
data() {
return {
ohlcv: [
[ 1551128400000, 33, 37.1, 14, 14, 196 ], // [timestamp, open, high, low, close, volume],
[ 1551132000000, 13.7, 30, 6.6, 30, 206 ],
[ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],
[ 1551139200000, 21.7, 25.9, 18, 24, 140 ],
[ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],
]
}
}
}
</script>

Demo and playground: https://tvjs.io/play/
Documentation: https://github.com/tvjsx/trading-vue-js
License: MIT
Community: https://discord.gg/PKD4PUy

Conclusion

If you are interested in understanding the technical side and pitfalls for charting_library and TradingVue please support the article or write what is wrong.

If you have experience using one or more libraries, please write down in the comments, it will be interesting to know your opinion :)

Thanks for your attention!

Marcius Studiohello@marcius.studioDiscordTelegram

If the post was helpful, “hit” the “claps” button, and show how u like it. “Follow” @marcius-studio, we publish interesting and useful cases!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store