ApexCharts card - A highly customizable graph card

[jchasey (John Chasey)]

Is a day/night visual possible? e.g.

With the mini-graph its a plot of the tod binary_sensor.

[RomRider]

You can convert binary_sensors into something you can display on the graph using transform. Examples are in the documentation.

[jchasey (John Chasey)]

First stab gives me this

based on this code:

      - type: custom:apexcharts-card
        header:
          show: false
        graph_span: 1w
        series: 
          - entity: sensor.penberth_water_level_stage
            name: Penberth Level
          - entity: input_number.penberth_flood_alarm
            color: red
            show:
              legend_value: false
          - entity: binary_sensor.night
            transform: 'return x === "on" ? 1 : 0;'
            color: grey
            type: area
            group_by:
              func: raw
        apex_config:
          stroke: 
            width: [1,1,0]

Only issue is the ‘on’ level of the binary_sensor seems to hit a point and then come back down rather than stay at that level. Any suggestions?

[RomRider]

Yep, add curve: stepline to the binary_sensor serie

[jchasey (John Chasey)]

Many thanks - that did the trick

[RomRider]

New Release

1.6.0 (2021-02-08)

Highlights:

• People using:

  apex_config:
    stroke: 
      width: [1,2]
  

  should convert it into:

  series:
    - entity: x.y
      stroke_width: 1
    - entity: y.z
      stroke_width: 2
  

• People using:

  apex_config:
    fill:
      opacity: [1, 0.2]
  

  should convert it into:

  series:
    - entity: x.y
      opacity: 1
    - entity: y.z
      opacity: 0.2
  

• config_templates: Define a chart template once, reuse it many times. Also useful with the new color_list option.

• all_series_config: Apply one config to all series at the same time

• Experimental stuff : This is new and you’ll have to opt-in to use the features as they break some other features (listed in the documentation).

  • color_threshold to display rainbows
    
    
  • disable_config_validation: to break the configuration
  • hidden_by_default: It will toggle a serie initially as if you had clicked on the legend

Features

• config_tpl: Create a config template and use it everywhere with config_templates, apply the same config to every series with all_series_config and add color_list to define your color list in one shot (#64) (17004a3)
• experimental: hidden_by_default to toggle series on load (#62) (63717b7), closes #60
• series: Define the opacity of the line or area (8dfb3fd), closes #57
• add stroke_width and experimental color_threshold/disable_config_validation (fcdfa88), closes #58

Bug Fixes

• color_threshold: opacity for color_threshold (5a325f4)
• func: median was sometimes wrong (c36dda7)

[maxym]

@RomRider

Define the opacity of the line or area

Isn’t it possible for bars?

[RomRider]

It is possible yes.

[scooper1]

the new template system
does it apply to the apex_config: entries

[RomRider]

Yes, to the whole configuration!

I released this feature because I believe you all already start to have massive configs that you have to replicate many times and I don’t like writing twice the same code

[scooper1]

ok i have to work out what i did wrong
yep massive over 2000 lines extra at moment

[RomRider]

Let me know if there’s something wrong. I have reused the code I use in button-card so it should be pretty solid, but you never know

[scooper1]

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

[RomRider]

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

[scooper1]

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

[RomRider]

haha, well good luck

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

[scooper1]

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

[Lunkobelix]

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.

[RomRider]

That is already possible with

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

Options (Reference) > yaxis – ApexCharts.js

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

[Lunkobelix]

I have totally missed that, thanks a lot!