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.