Stock Ticker Chart with Sensor Card

I am looking for a way to show a stocker ticker price, with price data that aligns with market open and close. There appears to be a couple API sources out there like Yahoo and Advantage, which is great, except that when using the Sensor Card, it requires the hours_to_show which ends up not really helping when looking at the card in the morning, or during the weekend.

How can the Sensor Card (or alternative graph) be used to chart only data for the last 5 business days, and data that is within market hours?

From the following example, you can see how looking at the last 48 hours on a Sunday doesn’t really show a how a stock is trending:

  - type: vertical-stack
    cards:
      - type: sensor
        entity: sensor.yahoofinance_cof
        style: |
          ha-card  {
            background-color: rgba(0, 0, 0, 0.3);
            box-shadow: none;
          }
        graph: line
        name: Capital One
        icon: 'mdi:cash'
        detail: 1
        unit: USD
        hours_to_show: 48

@gitisz Did you ever find a good way to log only the when the market is open ?

@gitisz how did you set a background image in the chart?

@Braindrain I never got it working. I am considering using charts from GitHub - RomRider/apexcharts-card: 📈 A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant and perhaps Node Red to pull data, but haven’t got back to it.

@john87 I use this:

resources:
  - url: /hacsfiles/lovelace-animated-background/animated-background.js
    type: module
...

animated_background:
  default_url: "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
  groups:
    - name: weather
      config:
        entity: sensor.weather_sun
        state_url:
          sunny_above_horizon:
            - "https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4"
            - "https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4"
            - "https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4"
            - "https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4"
            - "https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4"
          sunny_below_horizon:
            - "https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4"
            - "https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4"
            - "https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4"
            - "https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4"
            - "https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4"
          partlycloudy_above_horizon:
            - "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4"
            - "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4"
            - "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4"
            - "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4"
            - "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4"
            - "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4"
          partlycloudy_below_horizon:
            - "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4"
            - "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4"
            - "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4"
            - "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4"
            - "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4"
            - "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4"
          cloudy_above_horizon:
            - "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4"
            - "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4"
            - "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4"
            - "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4"
            - "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4"
            - "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4"
          cloudy_below_horizon:
            - "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4"
            - "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4"
            - "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4"
            - "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4"
            - "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4"
            - "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4"
          mostlycloudy_above_horizon:
            - "https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4"
            - "https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4"
            - "https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4"
          mostlycloudy_below_horizon:
            - "https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4"
            - "https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4"
            - "https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4"
          clear-night_above_horizon:
            - "https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4"
            - "https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4"
            - "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
            - "https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4"
          clear-night_below_horizon:
            - "https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4"
            - "https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4"
            - "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
            - "https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4"
          fog_above_horizon:
            - "https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4"
            - "https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4"
          fog_below_horizon:
            - "https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4"
            - "https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4"
          rainy_above_horizon: "https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4"
          rainy_below_horizon: "https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4"

...

views:
  - title: Home
    panel: true
    animated_background: weather

The background then reflects somewhat of an animated movie of what the weather actually is doing. There are a few weather conditions I left out mainly because they refer to mp4 files that I store locally.

1 Like

Oh, also using Card Mod to make transparent cards.

resources:
  - url: /hacsfiles/lovelace-card-mod/card-mod.js
    type: module

...

              - type: vertical-stack
                cards:
                  - type: sensor
                    entity: sensor.cofusd
                    style: |
                      ha-card  {
                        background-color: rgba(0, 0, 0, 0.3);
                        box-shadow: none;
                      }
                    graph: line
                    name: Capital One
                    icon: 'mdi:currency-usd'
                    detail: 1
                    unit: USD
                    hours_to_show: 12
                  - type: sensor
                    entity: sensor.btcusdt
                    style: |
                      ha-card  {
                        background-color: rgba(0, 0, 0, 0.3);
                        box-shadow: none;
                      }
                    graph: line
                    name: BTC-USDT
                    detail: 1
                    unit: USD
                    hours_to_show: 48

1 Like