aframe-stock-ticker


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

!Example gif

Usage

$3

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

``html

`

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.

$3

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

`html

``

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

$3

#### 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 |

$3

#### 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} |

This component was developed in partnership with Planet Voodoo® (Voodoo LLC) as part of their 'WebXR Wizardry' initiative.