ApexCharts card - A highly customizable graph card

my file is too long to post here … 3500 lines of raw config

I’d suggest you just experiment with a small config first to understand how it merges stuff together and then you can go full throttle :slight_smile:

thats too much like common sense
much more fun to try on live config

haha, well good luck :slight_smile:

BTW, there was a error in the doc that I just corrected: https://github.com/RomRider/apexcharts-card/commit/ea1fef45736b11fa79a78ca1ac59e7c80c42b39a

duh got me on that one
even better when I spotted it had a S at the end
appears to be working now - thanks

Are there any plans to make it possible to plot two lines but with different y-axis? As an example, I have this one showing outdoor temperature together with if my heating pump is using the immersion heater (in kW). I have a bunch of graphs similar to this.

That is already possible with

apex_config:
  yaxis:
    - # config axis1
    - # config axis2

Also check the forum above, you’ll find some examples.

1 Like

I have totally missed that, thanks a lot!

for the life of me, I cannot get the whole card to show, nor can I get it in the correct position and lose the background.


I’ve got this in a picture elements card:

cards:
  - type: picture-elements    
    image: /local/ui/floorplan/background.png
    style: |
      ha-card {
        background: rgba(42, 46, 48, 1)
      }
    elements:
      - type: 'custom:apexcharts-card'
        apex_config:
          stroke:
            width: 6
            curve: smooth
        graph_span: 7d
        span:
          start: day
        header:
          show: true
          title: Likelyhood of Rain
        series:
          - entity: weather.dark_sky_home
            type: line
            fill_raw: last
            extend_to_end: false
            color: '54C0EF'
            data_generator: |
              return entity.attributes.forecast.map((entry) => {
                return [new Date(entry.datetime).getTime(), entry.precipitation];
              });
        style: |
          :host {
            left: 50%;
            top:  55%;
            width: 95%;
            overflow: hidden;
            height: 55%;
            background: none !important;
            box-shadow: none !important;
          ha-card {
            height: 100%;
            background: none  !important;
            box-shadow: none !important;
            border-radius: 1vw;
            font-size: 1.2vw !important;
          }

      - type: 'custom:weather-card'
        current: true
        details: true
        entity: weather.dark_sky_home
        forecast: true
        name: Weather
        style: |
          :host {
            left: 50%;
            top:  30%;
            width: 95%;
            overflow: hidden;
            height: 63%;
            background: none !important;
            box-shadow: none !important;
          }
          .current {
            margin-bottom: 7vw;
          }
          .variations {
            margin-bottom: 4vw;
          }
          ha-card {
            height: 100%;
            background: none  !important;
            box-shadow: none !important;
            border-radius: 1vw;
            font-size: 1.2vw !important;
          }
          .forecast{
            padding: 0 2.5%;
            width: 95%;
          }
          .forecast .day:first-child{
            border-left: 0.1em solid #d9d9d9;
          }
          .forecast .day:last-child{
            border-right: 0.1em solid #d9d9d9;
          }
        tap_action:
          action: none

What about trying this:

apex_config:
  chart:
    height: 200px #or another value which works for you

For the background, you are missing a } at the end of the :host style block :slight_smile: and it might even fix the position! And you might not even need the above block either.

Great. Thank you. The only issue left to resolve is the missing data and defining the scale on the left.

I guess the missing data is null in the state?
if yes, this will fill them with 0:

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

Scale:

apex_config:
  yaxis:
    - min: 0
      max: 20 # or anything else that works for you
      decimalsInFloat: 1

Perfect thank you

Sorry one more question, how do i remove the grid lines from the y axis? Just been looking over the documentation, but i can’t see it.

apex_config:
  grid:
    show: false

FYI
Don’t have my finger on it yet, but v1.6.0 does seem to be noticeably sluggish vs. v1.5.0.

Unless you activate the experimental features, nothing changed in the options/data passed to the chart. So it’s probably just an impression :slightly_smiling_face:

Maybe a false alarm by me, I dups some charts on a new page and way trying with some of the ‘config_templates’ things. But of course now I can’t duplicate it, Will explore some more. It was kind of acting like the charts were constantly refreshing, not obeying ‘update_interval’.

for column chart the opacity doesn’t work neither way.
For line/area type, old way (set in apex config) doesn’t work in v1.6 (not sure it’s intentional). New way works.

I am not sure if this has been addressed through one of the features in the card.

I have got a sensor with the following attribute:

data: [0.082,0.077,0.072,0.085,0.076,0.074,0.082,0.074,0.073,0.081,0.075,0.072,0.057,0.011,0.201,0.004,0,0.153,0.012,0,0,0,0,0,0,0.07,0.2,0.23,0,0.001,0,0,0,0,0.044,0.001,0.962,0.549,0.194,0.167,0.146,0.115,0.117,0.13,0.163,0.122,0.09,0.073]

I would like to plot these values in a graph with the x-axis showing the time in 30 min intervals, which means that there are always 48 in the data attribute.

Hoping someone can guide me.