Financial charts for your application



Finding the right graphs takes time and brings 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.



Hello, Habr!



. 3 , . . open source lightweight-charts, trading-vue-js ( Vuejs) harting_library.



: " TradingView"



English version.





. , "" "". .





lightweight-charts



. , . , . , - , .



, TradingView - .





"" : line, area, , . . , . CDN Nodejs.



:



$ npm install lightweight-charts


import { 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 },
]);


: https://ru.tradingview.com/lightweight-charts/

: https://github.com/tradingview/lightweight-charts/blob/master/docs/README.md

: Apache License, Version 2.0

: 3.1.5

: https://discord.com/invite/E6UthXZ



harting_library



TradingView, . TV. , "" .





. :



  1. ( )
  2. GitHub


, .



API, . , โ€” .



harting_library . "-" .



: https://charting-library.tradingview.com/

: https://github.com/tradingview/charting_library/wiki ( 404 )

: https://discord.com/invite/E6UthXZ



TradingVue



, . TradingView, (MIT), API. , . 20ms 1000 . โ€” JavaScript, . Vuejs, , , .



:



โ€” . โ€” . TradingView.com โ€” !



. overlays. tvjs-overlays.



, , . Pull .





:



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>


playground



: MIT





" " charting_library TradingVue , .



, :)



Continuation of the article: " Connecting and Setting up TradingView Charts "



Thank you for attention!




All Articles