tvjsx / trading-vue-js Goto Github PK

https://i.imgur.com/JPbpuif.png

!please , help me.

I know this is going to sound weird, but how the fuck can I run this on my remote machine.
localhost just isn't my development server. .
How can I add my local host to this to get it to allow access from my other machine ?

I'm rendering trades/signals on the chart, is it possible to react to onClick or onHover events?

Looking to display tooltips and other useful menus. Thanks!

Hi,

First, I changed the value of GRIDX to 20 because I want to show all the dates in a daily chart.

When changing the zoom factor via the mousewheel, sometimes the weekend dates is being displayed.

Ideally for each marker in data, if the included mouseover text could include html, this would be useful..

Rather than just having a trade marker saying '8%' .. .

The marker could just be a signal, the tool tip could be the breakdown why that signal is there etc

Loving the legendButtons feature - was actually super easy to hook up!

Would love for a way to add my own custom buttons to this list.

An idea for how this might look, so you can set a custom icon and tooltip for that legend button:

            legendButtons: ['display','up','down','add','remove', 'mergeUp', 'mergeDown'],
            legendButtonDefinitions: {
              'mergeUp': {
                cssClass: 'fa fa-merge-up',
                htmlMarkup: '<i class="fa fa-merge-up"></i>',
                tooltip: 'Merge with section above'
              },
              'mergeDown': {
                ...
              }
            }

Hello again!

I saw you can set a colour for a whole series:

{
    "name": "EMA, 25",
    "type": "EMA",
    "data": [
        [ 1551128400000, 3091 ],
        [ 1551132000000, 3112 ],
        [ 1551135600000, 3105 ]
    ],
    "settings": {
        "color": "#42b28a"
    }
},

Would it be possible to optionally run different colours through different parts of a series?

One way I imagine this:

{
    "name": "EMA, 25",
    "type": "EMA",
    "data": [
        [ 1551128400000, 3091, '#50b242' ],
        [ 1551132000000, 3112, ' #50b242' ],
        [ 1551135600000, 3105, '#b24242' ]
    ]
},

Hi,
I have changed the Grin example (now I understand how overlays useful are ;o) and I have added a small line to get the screen position..
`
draw(ctx) {

        const l = this.$props.layout

        console.log(this.$props.cursor.y$); // added

`
But I can see in debug that this is displayed several times on 1 click...
Is that normal ?

I'm sure I'm missing something, as I haven't been able to dig as thoroughly into this project as I should; but here's my basic understanding. This repo is a combination of javascript code which runs locally via node and is displayed on a local port: 8080, the code then detects any changes to the data.json file and refreshes the page. The question I have is could some form of API or data pass through be implemented into the code to where I could just pass a JSON file of new points for the graph and each element to be appended onto the end of the graph and later saved to the data.json file (whether this be just the next candle or adding another 20 candles onto the end, same thing just appending to the graph), avoiding the need for a recompile each time I want to add a data point. -Very useful for efficient graph streaming.

Spawned from #20. One very very very minor observation is the zoom seems slightly inconsistent. You can see here, the indicator seems shifted-slightly to the right of the last candle:

If I zoom in and move it to the left, it fits correctly:

If I move the same view to the right, you see the offset again:

But this is very very minor, something about how the zooming works.

I like the trade markers. They're great. But often, you just want to also put markers at other random points, on the chart to highlight things for whatever reason.

This is why I think the 'trade marker' should just be abstracted into a more generic 'marker' on-chart display and you just set the marker you want to use.

Maybe something like.. .

onchart { 
	'drawings': [
		{
			'name': 'my first set of markers'
			'type': 'marker'
			'data': [ 
				[x,y],
			]
			'settings': {
				'marker': '↑'
				'color': '#A2FF00'
				...etc 
			}

		}
	]
}

This is not really a bug, but wanted to open a queue to discuss about the progress of Ichimoku indicator with TVJS.
Code will be shared when a good beta is available and once I checked all the values of all the lines.
This is created with 1 overlay, which calculates and draws all the 5 lines, with options to display each of the line, change the color...
Thanks @C4151 for your 2 latest changes, opening the grid to the future !
Work in Progress

-I can get the cursor position data and if it is currently scrolling, but can I get any other data?
-Self-explanatory, would like to add a listener of some kind if at all possible.

Hi,

Is there a way to add a custom indicator to the offchart grid?

I noticed this happens in the demo too:
https://c451.github.io/trading-vue-demo/

Is there a way to remove the cap on how far I can zoom out? Scrolling sideways is hard and doesn't work with a normal mouse scroll (two fingers sideways on macbooks), has to happen by dragging.

In some cases, such as 3 minute candles, it's really hard to find events that may have happened several days in the past. Would love to be able to zoom further out, beyond the current limit. Is it hardcoded somewhere?

-Self Explanatory

The cursor position value I can currently get via the api is locked to within the candlesticks. can I get the absolute position of the cursor (specifically x position) value of the cursor when it is not in line with a candle?

Hi, I've tried to implement your grin example but, it appears to be non-functional. Everything compiles and the graph shows, but the background color is not changed nor does the smiley face show up.

Here's my modified code, nothing else has been changed to my knowledge.

<App.vue-------------------------------------------------------------------------------------->

<Grin.vue------------------------------------------------------------------------------------------------------------------------->

Ubuntu 18.04
Visual Studio Code
Compiled with npm
Run in bash with "npm run dev"

robot_enthusiast@TradingBotMaster:~/git/Vue$ npm run dev

[email protected] dev /home/robot_enthusiast/git/Vue
webpack-dev-server --config webpack/dev.config.js --mode development --progress --hot

10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 37f5e7b4c1dc92ceb56e
Version: webpack 4.30.0
Time: 4073ms
Built at: 04/20/2019 8:00:42 PM
Asset Size Chunks Chunk Names
index.html 475 bytes [emitted]
main.js 1.59 MiB main [emitted] main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./src/main.js 52 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/vue/dist/vue.runtime.esm.js] 222 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 8.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {main} [built]
[./src/main.js] 133 bytes {main} [built]
+ 103 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 634 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.

In China's futures market, the trading day starts at 21:00.
So there will be the following data:

2018-11-15 22:00 [1.5423192e+12 2353 2355.5 2341 2349.5 65876]
2018-11-15 23:00 [1.5423228e+12 2349.5 2364 2344 2353.5 85906]
2018-11-15 00:00 [1.54224e+12 2353.5 2358.5 2351.5 2358.5 18592]
2018-11-15 10:00 [1.542276e+12 2358.5 2366.5 2349 2358 78030]
2018-11-15 11:00 [1.5422796e+12 2357.5 2363.5 2345 2346 60648]
2018-11-15 14:00 [1.5422904e+12 2346 2361 2330 2352 171174]
2018-11-15 15:00 [1.542294e+12 2352 2383.5 2350 2382 115614]
2018-11-16 22:00 [1.5424056e+12 2385 2397.5 2376.5 2396 140816]
2018-11-16 23:00 [1.5424092e+12 2395.5 2415 2392 2407.5 104022]
2018-11-16 00:00 [1.5423264e+12 2407.5 2425 2402.5 2425 64592]
2018-11-16 10:00 [1.5423624e+12 2425 2429 2412 2421.5 101498]
2018-11-16 11:00 [1.542366e+12 2422 2432 2416 2427 61096]
2018-11-16 14:00 [1.5423768e+12 2427.5 2429.5 2405 2412 108658]
2018-11-16 15:00 [1.5423804e+12 2411.5 2417 2397 2410 121504]
2018-11-19 22:00 [1.5426648e+12 2410 2412 2392 2410 118954]
2018-11-19 23:00 [1.5426684e+12 2410.5 2421 2406 2409 85356]
2018-11-19 00:00 [1.5425856e+12 2409 2413 2403.5 2413 27924]
2018-11-19 10:00 [1.5426216e+12 2396.5 2398.5 2376.5 2389 181618]
2018-11-19 11:00 [1.5426252e+12 2389 2393 2365.5 2376 94366]
2018-11-19 14:00 [1.542636e+12 2376 2383 2368 2371.5 72144]
2018-11-19 15:00 [1.5426396e+12 2371.5 2382 2361 2363 76964]
2018-11-20 22:00 [1.5427512e+12 2360 2364.5 2340 2341.5 136750]
2018-11-20 23:00 [1.5427548e+12 2341.5 2348.5 2336 2339.5 70012]
2018-11-20 00:00 [1.542672e+12 2339 2344.5 2337.5 2338.5 16880]
2018-11-20 10:00 [1.542708e+12 2338.5 2342 2314 2315.5 106582]
2018-11-20 11:00 [1.5427116e+12 2316.5 2320 2304.5 2316.5 83582]
2018-11-20 14:00 [1.5427224e+12 2317 2317 2296 2301 98994]
2018-11-20 15:00 [1.542726e+12 2301 2318.5 2295.5 2303.5 101950]
2018-11-21 22:00 [1.5428376e+12 2290 2290 2246 2254 206692]
2018-11-21 23:00 [1.5428412e+12 2253.5 2258 2234.5 2240 78278]
...

But the final candlestick, the time shown seems to be sorted by real time, like this:

2018-11-15 00:00 [1.54224e+12 2353.5 2358.5 2351.5 2358.5 18592]
2018-11-15 10:00 [1.542276e+12 2358.5 2366.5 2349 2358 78030]
2018-11-15 11:00 [1.5422796e+12 2357.5 2363.5 2345 2346 60648]
2018-11-15 14:00 [1.5422904e+12 2346 2361 2330 2352 171174]
2018-11-15 15:00 [1.542294e+12 2352 2383.5 2350 2382 115614]
2018-11-15 22:00 [1.5423192e+12 2353 2355.5 2341 2349.5 65876]
2018-11-15 23:00 [1.5423228e+12 2349.5 2364 2344 2353.5 85906]

I really hope to consider this.

This is a great project!
I hope he is getting better and better!

If I provided ohlcv arrays for 15m and 30m candles, I'd love for a way to switch between them. This effectively allows a way to navigate trades that happened over bigger timeframes, from different levels of detail.

Combined with the data getters (when reaching a scroll limit of available data), this could be a pretty nifty feature.

Hi,

Some suggestion for the legend part as per the title.

Example:

diff --git a/src/components/Legend.vue b/src/components/Legend.vue
index 74d0c4a..79b03b1 100644
--- a/src/components/Legend.vue
+++ b/src/components/Legend.vue
@@ -8,11 +8,11 @@
              :style="{ color: common.colors.colorTitle }">
               {{common.title_txt}}
         </span>
-        O<span class="t-vue-lspan" >{{ohlcv[0]}}</span>
-        H<span class="t-vue-lspan" >{{ohlcv[1]}}</span>
-        L<span class="t-vue-lspan" >{{ohlcv[2]}}</span>
-        C<span class="t-vue-lspan" >{{ohlcv[3]}}</span>
-        V<span class="t-vue-lspan" >{{ohlcv[4]}}</span>
+        open<span class="t-vue-lspan" >{{ohlcv[0]}}</span>
+        high<span class="t-vue-lspan" >{{ohlcv[1]}}</span>
+        low<span class="t-vue-lspan" >{{ohlcv[2]}}</span>
+        close<span class="t-vue-lspan" >{{ohlcv[3]}}</span>
+        vol<span class="t-vue-lspan" >{{ohlcv[4]}}</span>
     </div>
     <div class="t-vue-ind" v-for="ind in this.indicators">
         <span class="t-vue-iname">{{ind.name}}</span>
@@ -53,14 +53,15 @@ export default {
                 return Array(6).fill('n/a')
             }
             const prec = this.layout.prec
+            const format = (n, d) => parseFloat(n.toFixed(d)).toLocaleString()
 
             return [
-                this.$props.values.ohlcv[1].toFixed(prec),
-                this.$props.values.ohlcv[2].toFixed(prec),
-                this.$props.values.ohlcv[3].toFixed(prec),
-                this.$props.values.ohlcv[4].toFixed(prec),
+                format(this.$props.values.ohlcv[1], prec),
+                format(this.$props.values.ohlcv[2], prec),
+                format(this.$props.values.ohlcv[3], prec),
+                format(this.$props.values.ohlcv[4], prec),
                 this.$props.values.ohlcv[5] ?
-                    this.$props.values.ohlcv[5].toFixed(2):
+                    format(this.$props.values.ohlcv[5], 2) :
                     'n/a'
             ]
         },
@@ -139,18 +140,20 @@ export default {
 .trading-vue-ohlcv {
     pointer-events: none;
     margin-bottom: 0.5em;
+    font-size: 0.8em;
+    color: steelblue;
 }
 .t-vue-lspan {
     font-variant-numeric: tabular-nums;
     font-weight: 100;
-    font-size: 0.95em;
-    color: #999999; /* TODO: move => params */
+    font-size: 1.2em;
+    color: #EEE; /* TODO: move => params */
     margin-left: 0.1em;
     margin-right: 0.2em;
 }
 .t-vue-title {
     margin-right: 0.25em;
-    font-size: 1.45em;
+    font-size: 2em;
     font-weight: 200;
 }
 .t-vue-ind {

How to remove these lines vertical?

Mini enhancement request, if you find the time - similar to tradingview, even if temporary until the page is reloaded.

How do make certain candles specific colors ?
Obviously color coding candles that denote strength and weakness is a pretty important and useful feature, I cannot see how to do this without redrawing another fake candle ontop of the existing one, it feels like there should be an optional 'color' parameter at the end of each data entry set

What do you think as preferred solution to this ?

I have 2h candles, for some reason they're not rendering. Can you try?

30m candles in the same flow are fine.

2h Data object:
https://gist.github.com/tiagosiebler/6c1fe7cb89997834f44bb508131074c3

Removing an overlay with splice() or Vue.delete() has no effect.

Thanks for the great project. Really has a lot of promise compared to the other charting libs out there.

The issue I found is that when loading certain datasets, the candles doesn't fill the entire canvas and cuts off at that point even when scrolling. I found the issue using AAPL's daily candles since 2000.

Here's a short video of the issue and the data set I used:
Video of issue
AAPL Dataset

-Self-explanatory, would like to add a listener of some kind if possible.

Hi,

Just a suggestion but I think it will be useful to make the x-axis into two part (two lines), the first part showing the points and the 2nd part showing a higher time step.

With daily chart, first line = days, second line = month
With hourly chart, first line = hour, second line = day
With minute chart, first line = minute, second line = hour

For example with daily chart:

25 26 27 28 29 30 1 2 3 4 5 <- 1st line
                 Aug        <- 2nd line

With the "Splines" indicator type, you can plot multiple lines on one indicator:

var indicator = {
  name: "BBands",
  type: "Splines",
  data: [
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3]
  ],
  settings: {}
};

I was thinking it could be useful for quick-starts if the colours and labels could be easily associated in the Splines indicator. Here's ideas for both in terms of format:

var indicator = {
  name: "BBands",
  type: "Splines",
  data: [
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3],
    [timestamp, line1, line2, line3]
  ],
  settings: {
    colors: [
      line1Color, line2Color, line3Color
    ],
    // OR
    seriesColors: [
      [timestamp, line1Color, line2Color, line3Color],
      [timestamp, line1Color, line2Color, line3Color],
      [timestamp, line1Color, line2Color, line3Color],
      [timestamp, line1Color, line2Color, line3Color],
    ],
    // labels
    labels: [
      line1Label, line2Label, line3Label
    ]
  }
};

The colours would let you easily either set a full series colour or a moving colour as the trend changes.

The labels would easily let you add some kind of legend to a Splines type indicator, such as this one:

Both features, if easy to add, would make it easier to work with Splines in a flexible way. I guess the answer is probably already "you can make your own overlay" 😄 but just in case this is something you (or someone else watching) is willing to enhance for others too!

it does not work

import TradingVue from 'trading-vue-js'
import Data from '../data/data.json'
import Grin from './Grin.js'

export default {
    name: 'app',
    components: { TradingVue, Grin },
    methods: {
        onResize(event) {
            this.width = window.innerWidth
            this.height = window.innerHeight
        }
    },
    mounted() {
        window.addEventListener('resize', this.onResize)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onResize)
    },
    data() {
        return {
            chart: Data,
            width: window.innerWidth,
            height: window.innerHeight,
            colors: {
                colorBack: '#fff',
                colorGrid: '#eee',
                colorText: '#333',
            },
            overlays:[Grin]
        }
    }
}

import TradingVue from 'trading-vue-js'
    import Trades from 'trading-vue-js'
    import Spline from 'trading-vue-js'
    import Candles from 'trading-vue-js'
    import Hubs from './Hubs.js'

    export default {
        name: 'app',
        components: {TradingVue},
        methods: {
            onResize(event) {
                this.width = window.innerWidth
                this.height = window.innerHeight - 50
            }
        },
        mounted() {
            window.addEventListener('resize', this.onResize)

            setTimeout(() => {
                // Async data setup
                this.$http.get('http://localhost:5000/kline-merge').then(response => {
                    this.$set(this, 'chart', {
                        'chart':
                            {
                                'type': 'Candles',
                                'data': response.body.lines,
                                "settings": {}
                            },

                        'onchart':
                            [
                                {
                                    'name': 'Chan Hub',
                                    'type': 'Hubs',
                                    "data": response.body.hubs,
                                    "settings": {
                                    }
                                },
                                {
                                    'name': 'Strokes',
                                    'type': 'Spline',
                                    "data": response.body.strokes,
                                    "settings": {
                                        "color": "black"
                                    }
                                }
                            ]
                    })
                })
            }, 0)
            this.onResize()
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.onResize)
        },
        data() {
            return {
                'chart': {},
                'width': window.innerWidth,
                'height': window.innerHeight,
                'colors': {
                    'colorBack': '#fff',
                    'colorGrid': '#eee',
                    'colorText': '#333',
                },
                'overlays': [Hubs]
            }
        }
    }

If it's possible that would be amazing. I'd love to be able to have 10+ off-chart plots, this is an odd ask I know. The best way to implement this would probably be to implement a scrollbar along the side so that way you can move through the off-chart plots via scrolling while leaving the main chart in the same location. This would also require an option to move the bottom "time/vertical crosshair line label) to directly under the main chart instead of underneath the last off-chart plot, that way you would be able to scroll through the off chart plots while still being able to see the vertical crosshair label at the bottom of the main plot.

Plus volume bars have the wrong width (may be related)

How to use a custom time format on the time axis?
For example, I want to use YYYY-MM-DD HH:MM (2019-07-21)?

Hi,

In format_date, when creating a new Date from epoch, the hour is shifted for as much as the timezone offset.

For example, in my timezone

new Date(1562803200000)
// Date Thu Jul 11 2019 07:00:00 GMT+0700 (Western Indonesia Time)

I could offset the epoch to deal with the hour, but it will cause problem when dividing the epoch with time time step, because it might not be divisible.

An easy solution would be to just add new Date().getTimezoneOffset() to t before formatting the date. This will ensure proper date/hour and division of the time step.

format_date(t) {
        t = t + (new Date().getTimezoneOffset() * 60000)
        let d = new Date(t)

Is there any way to add a method into an overlay which is periodically checked. For instance, I had the idea to hack together an overlay to solve my indicator switching issue. The intended behavior would go something like this, I'd make an overlay called indicator_switcher, which would place a small grey rectangle in the upper right corner of the graph and when clicked would execute some basic javascript code to swap the "offchart" section of the data.json file with the data needed for a different indicator (pulled from a separate JSON file) and save the data file. The app would then, of course, reload the chart with the new indicator; hacky but functional. -Eventually, multiple indicators could be stored in the other data file and it would just iterate through each one as you clicked the grey box again. I'm running into a few problems though. Most prominently I need to be able to have a method somewhere which is periodically checked. This would allow me to have some the code inside of it which changes the file run any time a conditional is met, most likely some form of is the cursor inside of the box + other parameters.

-So I ask is there any way to make part of an overlay's code dynamic, i.e. checked periodically, or are they simple an object definition which gets called once and nothing more.

hello. can i hide the Sidebar?

Hi,
I'm thinking about implementing an Ichimoku indicator. I need to draw data in the future (like kumo SSA / SSB) and also prediction prices/dates. I don't ask you to do it, but I would like to know if there is a simple way to draw dates in the future, with empty values? At the moment the crosshair is locked after the last candle, and if I try to put empty ohlc values after a date in the data file, the screen is black and not rendered.
Is that something already in your task list or do you have some ideas in mind so I could try to do it myself ?
Also, if there was a simple toolbox example, that would help me a lot to create other stuff like :
drawing a line between 2 selected points or in the future
Thanks for your ideas, your project rocks ! really !

Because using a dashed line obscure the wicks.

Example:

By the way from the screenshot it seems that the box width for the volume is a bit larger than the candle.

My modification (hardcoded values):

diff --git a/src/components/js/crosshair.js b/src/components/js/crosshair.js
index 551535f..261300d 100644
--- a/src/components/js/crosshair.js
+++ b/src/components/js/crosshair.js
@@ -39,8 +39,14 @@ export default class Crosshair {
             ctx.moveTo(0, this.y)
             ctx.lineTo(this.layout.width - 0.5, this.y)
         }
+        ctx.stroke()
+        ctx.restore()

         // V
+        ctx.save()
+        ctx.beginPath()
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)'
+        ctx.lineWidth = 10
         ctx.moveTo(this.x, 0)
         ctx.lineTo(this.x, this.layout.height)
         ctx.stroke()

Would it be possible to add a configuration file, that is used on startup. A few useful features I can think of immediately to include in the config file would be the local port that you want to launch the graph on (8080 might already be in use) and which input data JSON file you want to use (a path to a specific file) as you might want to keep multiple but, different data.json files around and select which one to use on startup. --It might be more useful to have these as command line parameters when building with npm if possible, default values could be what's hardcoded now.

Is it possible to change some of the constants, like the ChartConfig.MAX_ZOOM, without having to rebuild the trading-vue library, e.g within the scope of this minimal sample?
https://github.com/C451/trading-vue-js#how-to-use

First, amazing, very good job already !
Are there some options or solutions to remove gaps when we display daily candles ?

First, this is truly awesome work. The fidelity as good if not better than TradingView. Well done!

I'm curious if this is tightly coupled to Vue or can this be used as a JS lib?

Thanks!

So I loaded up the 101 example and set about implementing a dark mode. The problem I'm running into, (I could hack around it) is that presumably due to the dark background and some backend color mixing the colors for volume and probably a few other things are coming out darker than they should be by a few shades. Any reason why this might be the case.

Example 101 App.vue

npm run test

To reproduce

Is it possible to show indicators that flip between 0 and 100 (and nothing in between)?

Example indicator dataset with candles:
https://gist.github.com/tiagosiebler/5695f318d1ffde90c151a0472fc36b04

I'm seeing a white view instead (last section):

If the "Spline" type doesn't suffice for that, is there another that would better fit this kind of indicator?

just the next candle or adding another 20 candles onto the end, same thing just appending to the graph), avoiding the need for a recompile each time I want to add a data point.

Big subject, imo. Exposing append & prepend methods would be super useful !
https://github.com/C451/trading-vue-js/blob/8df612c90dac0bde521e08a17afd03f87c13c819/src/components/Chart.vue#L223
Partial rendering of the candles & indicators etc...

Originally posted by @Tucsky in #7 (comment)

Hi,
If I create an "onchart" or "offchart" element in my data, the "type" var seems to break if it's not a specific thing.

This will work:

{
"name": "EMA, 75",
"type": "EMA",
"data": my_data,
"settings": {}
},

but this will not:

{
"name": "EMA, 75",
"type": "Hello",
"data": my_data,
"settings": {}
},

Is this a feature or a bug? In the meantime I'm leaving EMA for all my onchart lines and RSI for all of my offchart lines and it works.
Thanks