Tides in Lovelace

[marwun01]

Great, glad its working!

[andrew_NH (Andrew)]

Seems like everybody on this thread is using the jshufro fork of NOAA tides because it has more features. But this fork no longer works with the latest version of Home Assistant.

NOAA tides now broken

And the author does not appear to be fixing it.

I put in a feature request to add this forks features to the built in NOAA tide component.

Updates for NOAA Tides integration

I would like some features added to the NOAA Tides integration. Most Home Assistant users that need NOAA tide data use this fork of NOAA tides. This is likely because the fork has important features that are missing from the built in integration. The most important are Next Tide, Last Tide, and tide_factor (water level). If you are building a tide display these are necessary but are not available in the original integration. The fork is no longer maintained and will not work in the next ver…

Please vote for my feature request and add any other comments that are useful to it.

[DJI (David Inwood)]

Interesting thread. I did some work on this some time ago and ended up with a canvas gauge card that emulates a standard tide gauge. It’s got a few other features like overlaying wave heights (grey band) and the critical depth (in pink) needed for launching one of our lifeboats.

[cdopp (Christopher Dopp)]

Heads up. There is a pull request for the jshufro/home_assistant_noaa_tides repository that fixes the problems that broke the integration with 2025.1 (Thank You Flight-Lab!)

It does appear that the original developer is not supporting the repository any longer, and no new releases have come out for a while. There are a couple Pull Requests now that have not been reviewed and/or merged into the project. Long term, forking this code into a new supported repository would be great. In the meantime, the basic features that I have been using are working again with Flight-Lab’s changes.

[SkiBoard]

@sunroom

apexCharts-card for my own needs:

This is EXACTLY what I’m tring to do!

But having LOTS of trouble doing it. I’m in Australia so can’t use NOAA for tide data, however I’m using the stormglass.io tide API which is outputting data to a sensor (call it tide_height_by_hour) as a “state attribute” which comes up as follows:
data:

• sg: 0.46
  time: “2025-01-06T00:00:00+00:00”
• sg: 0.33
  time: “2025-01-06T01:00:00+00:00”
• sg: 0.22
  time: “2025-01-06T02:00:00+00:00”
  etc etc (for every hour for the next few days)

I can’t for the life of me work out how to convert this into a sensor that I can put into a graph going forward.

I’ve love any advice or suggestions. Thanks so much!

[sunroom]

I also don’t have a sensor, and the data is very similar to your format! ApexCharts supports data manipulation, which worked well for this. Here’s what a similar graph card might look like for yours (just replace your_state_attribute_name with the actual list attribute name):

type: custom:apexcharts-card
graph_span: 135h
header:
  show: true
  title: My Title
  show_states: false
span:
  start: minute
series:
  - entity: sensor.tide_height_by_hour
    name: Height (ft)
    extend_to: end
    type: line
    data_generator: >
      return entity.attributes.your_state_attribute_name.map((prediction) => { return[new
      Date(prediction.time), prediction.sg]; });