ApexCharts card - A highly customizable graph card

Yep. Done that.

OK did I do something wrong here?

          - type: custom:apexcharts-card
            graph_span: 48h
            header:
              show: true
              title: Rain Today
            apex_config:
              stroke:
                width: 3
                curve: smooth
              chart:
                zoom:
                  enabled: true
                toolbar:
                  show: true
                  tools:
                    zoom: true
                    zoomin: true
                    zoomout: true
                    pan: true
                    reset: true
            series:
              - entity: sensor.gosford_rain_since_9am
                name: Rain since 9am 
                type: line
                group_by:
                  func: avg
                  duration: 12min
          - type: custom:apexcharts-card
            graph_span: 48h
            header:
              show: true
              title: Air Pressure
            apex_config:
              stroke:
                width: 3
                curve: smooth
              chart:
                zoom:
                  enabled: true
                toolbar:
                  show: true
                  tools:
                    zoom: true
                    zoomin: true
                    zoomout: true
                    pan: true
                    reset: true
            series:
              - entity: sensor.nodemcu_lounge_bme280_pressure
                name: Lounge Pressure
                type: line
                group_by:
                  func: avg
                  duration: 12min
              - entity: sensor.nodemcu_lounge_bme280_seapressure
                name: Sea Pressure
                type: line
                group_by:
                  func: avg
                  duration: 12min
              - entity: sensor.nodemcu_bedroom_bme280_pressure
                name: Bedroom Pressure
                type: line
                group_by:
                  func: avg
                  duration: 12min

The Rain today doesn’t pront a legend down the bottom but the sea pressure does. Is this because it’s only got one entity?

1 entity = no legend by default.
To force it:

apex_config:
  legend:
    showForSingleSeries: true
1 Like

FYI:
Seems to do a pretty good job of giving you full screen width charts. And seems to adapt fine on iOS app both in portrait and landscape modes.

title: T09 Sensors
panel: true
cards:
- type: vertical-stack

Actually, since I noticed the style bug, I’ve moved to my testing environment where it is used as a simple card, no picture element, nothing fancy, only the above config.

This is what’s showing:

Untitled

This has to be my new favourite card - knocked this up in about 15 minutes this evening:

Combines the Amber Electric historic electricity price with the predicted price

Code for those interested
    - type: custom:apexcharts-card
      graph_span: 59h
      header:
        show: true
        title: "Amber Price Prediction (General Usage - E1)"
      span:
        start: hour
        offset: -1d
      apex_config:
        chart: { type: "area", height: 300 }
        stroke: { show: true, width: 3, curve: smooth }
        legend: { show: false }
        dataLabels: { enabled: false }
        xaxis:
          {
            type: "datetime",
            labels: { datetimeFormatter: { month: "ddd", day: "ddd" } },
          }
        fill:
          {
            type: "gradient",
            gradient:
              {
                shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.45,
                opacityTo: 0.05,
                stops: [20, 100, 100, 100],
              },
          }
      series:
        - entity: sensor.amber_general_usage_price
          name: Predicted Price
          type: area
          # color: "#008FFB"
          extend_to_end: false
          data_generator: |
            return entity.attributes.price_forcecast.map((entry) => {
              return [new Date(entry.pricing_period), entry.price];
            });
        - entity: sensor.amber_general_usage_price
          name: Historic Price
          type: area
          extend_to_end: false

    - type: custom:apexcharts-card
      graph_span: 59h
      header:
        show: true
        title: "Amber Price Prediction (Solar Feed-In)"
      span:
        start: hour
        offset: -1d
      apex_config:
        chart: { type: "area", height: 300 }
        stroke: { show: true, width: 3, curve: smooth }
        legend: { show: false }
        dataLabels: { enabled: false }
        xaxis:
          {
            type: "datetime",
            labels: { datetimeFormatter: { month: "ddd", day: "ddd" } },
          }
        fill:
          {
            type: "gradient",
            gradient:
              {
                shadeIntensity: 1,
                inverseColors: true,
                opacityFrom: 0.45,
                opacityTo: 0.05,
                stops: [20, 100, 100, 100],
              },
          }
      series:
        - entity: sensor.amber_solar_feed_in_tariff
          name: Predicted Price
          type: area
          # color: "#008FFB"
          extend_to_end: false
          data_generator: |
            return entity.attributes.price_forcecast.map((entry) => {
              return [new Date(entry.pricing_period), entry.price];
            });
        - entity: sensor.amber_solar_feed_in_tariff
          name: Historic Price
          type: area
          extend_to_end: false

15 Likes

Yeah I love it but I bow in your presence… Great use.

1 Like

Please share your timezone, config and full dev-tools entry of the weather entity. We’ll make this work :blush:

1 Like

csv

Sure. Timezone is Europe/Zurich, the openweathermap is configured via the frontend, as seen here.

Here’s the full dev tools output of the state attributes:

temperature: 7.2
humidity: 85
pressure: 1011
wind_bearing: 212
wind_speed: 6.44
attribution: Data provided by OpenWeatherMap
forecast:
  - datetime: '2021-01-29T11:00:00+00:00'
    precipitation: 24
    wind_speed: 7.21
    wind_bearing: 227
    condition: rainy
    temperature: 8.1
    templow: 4.5
  - datetime: '2021-01-30T11:00:00+00:00'
    precipitation: 19
    wind_speed: 2.61
    wind_bearing: 229
    condition: rainy
    temperature: 4.8
    templow: 2.9
  - datetime: '2021-01-31T11:00:00+00:00'
    precipitation: 4
    wind_speed: 1.54
    wind_bearing: 51
    condition: rainy
    temperature: 6.3
    templow: 3.2
  - datetime: '2021-02-01T11:00:00+00:00'
    precipitation: 23
    wind_speed: 5.87
    wind_bearing: 220
    condition: rainy
    temperature: 5.3
    templow: 2.5
  - datetime: '2021-02-02T11:00:00+00:00'
    precipitation: 3
    wind_speed: 3.39
    wind_bearing: 225
    condition: rainy
    temperature: 7.4
    templow: 4.7
  - datetime: '2021-02-03T11:00:00+00:00'
    precipitation: null
    wind_speed: 5.08
    wind_bearing: 228
    condition: cloudy
    temperature: 9.8
    templow: 5.3
  - datetime: '2021-02-04T11:00:00+00:00'
    precipitation: null
    wind_speed: 1.48
    wind_bearing: 226
    condition: cloudy
    temperature: 8.2
    templow: 5
  - datetime: '2021-02-05T11:00:00+00:00'
    precipitation: null
    wind_speed: 1.96
    wind_bearing: 28
    condition: cloudy
    temperature: 8.3
    templow: 4.9
friendly_name: OpenWeatherMap

Hope this helps.

Also your full card config please :blush:

Of course!

      - type: 'custom:apexcharts-card'
        graph_span: 8d
        span:
          start: hour
        apex_config:
          dataLabels:
            enabled: true
        series:
          - entity: weather.openweathermap
            type: column
            data_generator: |
              return.entity.attributes.forecast.map((entry) => {
                return [new Date(entry.datetime), entry.precipitation];
              });
1 Like

Your issue is in your code :slight_smile:

You have that:

              return.entity.attributes.forecast.map((entry) => {
                return [new Date(entry.datetime), entry.precipitation];
              });

I wrote that:

              // There is a space between return and entity, not a . (dot)
              return entity.attributes.forecast.map((entry) => {     
                return [new Date(entry.datetime), entry.precipitation];
              });
1 Like

Oh wow, how did I miss that :flushed: :flushed: It works now, thanks!!!

Here’s my take on a forecast graph: min temp, temp and precipitation for the next 8 days;

There’s one small thing I’m still wondering: how to remove the state information from the legend. I only wish to show the series name. Didn’t find it in the apex docs, perhaps with card-mod?

4 Likes

That is not possible yet, please open a feature request :slight_smile:

Will do, I just thought, seeing your traffic sources image in the first post :wink:

1 Like

Some interesting options to overlay multiple periods of data on same chart coming in 1.3.0, thanks @RomRider ! You are writing some really great and useful code for Home Assistant!

Very very powerfull card.
I tried to play with it and I would just report a strange situation.
Ok on PC (firefox) ok on Andoird phone (Chrome) KO on iPhone (Safari and Chrome)

PC
Panoramica - Home Assistant – Mozilla Firefox

Android

iPhone

Bye
Sandro

Apple sucks :slight_smile: One day they will learn how to make a browser or just use chromium as their engine… even Microsoft went this way with Edge Chromium… :man_shrugging:

That seems like an upstream bug unfortunately in the ApexCharts.js library that I use.
I’ll have a look but I have little faith about this.

3 Likes