aframe-stock-ticker

An aframe component for displaying live stock tickers. Also works with cryptocurrency and forex.

Usage

crypto-chart

To create a crypto chart, add the crypto-chart component.

<a-entity crypto-chart="id: ethereum; days: 30; width: 5; height: 2.5;"></a-entity>

Uses the Coingecko API to gather data. This API doesn't require an API key, and works out of the box with the code above.

stock-chart

To create a stock chart, add the stock-chart component.

<a-entity stock-chart="symbol: AMC; interval: 30min; length: 100; width: 5; height: 2.5;"></a-entity>

Uses the Twelve Data API to gather data. This API works for any asset type - stocks, forex, and crypto - but it requires an API key. An API key can be acquired here for free, with a limit of 800 requests / day.

Once you have a Twelve API key, set window.TWELVE_API_KEY equal to it, as seen at the top of the example.

Properties

crypto-chart

Properties

| Property | Description | Default | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------- | | id | id of the target token. Full list available as a JSON here | "Ethereum" | | days | how many days back to display data from. Can only be: 1,7,14,30,90,180,365,max | 14 | | width | width of the chart | 4 | | height | height of the chart | 2 | | refreshRate | how often to refresh the chart data, in seconds | 30 | | | | | | backgroundColor | the color of the chart background | "#333" | | enableBackground | whether to enable a background behind the candles | true | | enableTitle | whether to display the ticker name on the chart | true | | enablePrices | whether to display the prices on the chart | true | | coloredWicks | whether to display wicks in the candles | true |

Members

| Member | Description | Path | | ---------- | ----------------------------------------------------------------------- | ---------------------------------------- | | timeseries | the current timeseries data. | el.components["crypto-chart"].timeseries |

stock-chart

Properties

| Property | Description | Default | | ---------------- | ------------------------------------------------- | ------- | | symbol | symbol of the target asset. | "AMC" | | interval | chart interval, how long each candle represents | "15min" | | length | how many candles to display | 100 | | width | width of the chart | 4 | | height | height of the chart | 2 | | refreshRate | how often to refresh the chart data, in seconds | 30 | | | | | | backgroundColor | the color of the chart background | "#333" | | enableBackground | whether to enable a background behind the candles | true | | enableTitle | whether to display the ticker name on the chart | true | | enablePrices | whether to display the prices on the chart | true | | coloredWicks | whether to display wicks in the candles | true |

Members

| Member | Description | Path | | ---------- | ----------------------------------------------------------------------- | --------------------------------------- | | timeseries | the current timeseries data. | el.components["stock-chart"].timeseries |

Events

| Event | Description | Event.detail | | -------------- | -------------------------------------------------- | --------------------------------------------------------------- | | price_increase | fired on chart refresh, if the price has increased | {name: asset name, price: current price, candle: latest candle} | | price_decrease | fired on chart refresh, if the price has decreased | {name: asset name, price: current price, candle: latest candle} |