ApexCharts card - A highly customizable graph card

[kpcz]

Hi all.
I have graph that shows electricity prices from nordpool component.

Is it somehow possible to get horizontal line that will always be at constant value. Like for example line that always will be 0.140 like this:

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 24h
header:
  title: Electricity Price Today
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_kwh_lv_eur_4_10_0
    type: column
    show:
      extremas: true
    float_precision: 3
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
    color_threshold:
      - value: 0
        color: rgba(19, 120, 22, 0.8)
      - value: 0.1
        color: rgba(138, 177, 0, 0.92)
        opacity: 1
      - value: 0.15
        color: rgba(198, 114, 0, 0.92)
      - value: 0.188
        color: rgba(200, 0, 0, 0.5)
      - value: 0.25
        color: rgba(140, 0, 72, 0.8)
      - value: 0.35
        color: rgba(0, 0, 0, 0.8)
apex_config:
  yaxis:
    - title:
        text: c/kwh
      decimalsInFloat: 3
  chart:
    height: 200px

[Lunkobelix]

Yes, I have it to show a threshold line for when the outdoor sun covers should be retracted.

apex_config:
    yaxis:
      - 'y': 10
        strokeDashArray: 5
        borderColor: '#962626'
        borderWidth: 1

[kpcz]

Thanks, but looks like my configuration is too specific.

  - 'y': 0.140

sadly does not show anything

[Lunkobelix]

Looks like some code is missing from my post, please try the following:

apex_config:
  annotations:
    position: back
    yaxis:
      - 'y': 10
        strokeDashArray: 5
        borderColor: '#962626'
        borderWidth: 1

[kpcz]

This is awesome, Thank You very much!

[Lunkobelix]

Does anyone know what the status on “Long Term Statistics” is? I understand it has been discussed? I would really like to have that implemented since that would allow me to show electricity consumption over a longer period of time via the build in functionality.

[simonh4]

Is there any way to use the usual ‘column’ type as a rangeBar type with timeline data (specifically the electricity price for today and tomorrow)? What I’m trying to produce is bars not centered atop ‘08:00’, for example, but that sit between ‘08:00’ and ‘09:00’. With the ‘now’ label as guide for the eye, it looks like the price changes 07:30 and 08:30 and so on.
Perhaps some offset for the axis?

Or is there an easy way to offset the ‘now’ label? I’ve not found this, neither have I been able to produce a xaxis annotation, even though an yaxis annotation works fine.

[RomRider]

I’m going to test and merge the PR next week, sorry I’ve been super busy lately.

[Lunkobelix]

I think I read someone having this issue with the extremas background rectangle but can’t find the post. Does anyone know how to fix it?

[Re-Mark (Robert)]

Hi,

I am sorry, but how do I add an ApexCharts card into a dashboard?

Obviously I am quite new to Home Assistant. I have installed HACS, I have added the repository Apexcharts-card, and in Configuration - Dashboards - Resources I have the URL to apexcharts-cards.js, Type JavaScript Module.

In my testing-dashboard I activate “Edit Dashboard”, then I try “Add Card”.
Is it not possible to add and configure an ApexCharts card by UI?

[arsaboo]

Is it possible to generate a chart similar to the one generated by ecobee (see example below):

Basically, this would use the climate entity that has the current temperature and humidity which will be used for the line graphs. The bar charts indicate HVAC operations (heat or cool) and fan operations. All the information is available in the climate entity.

[Re-Mark (Robert)]

When I click on “add card” while editing a Dashboard in the UI, now it is possible to selext ApexCharts. But i dont know why. I had restartet Home Assistant Core several times before, and I had always looked in this diaglogue if ApexCharts would show up, and it did not.
At some time in the evening the option suddenly was there.

Now I have to figure out how to modify it the right way. Already started to edit the preset card, changed from line and columns to two lines. And selected the two entities I wanted to view. The shown values are garbage though…
These are DS18B20 temperature sensors, connected to a ESP8285 running Tasmota, sent by MQTT. Home Assistant sees the correct temperature values, the standard “sensor cards” are ok. The values in ApexCharts card shows values between 0 and 10°C, instead in the range 30 to ~65°C.

Uh… looking into the code again… these are numbers generated by random, it seems…
Ok, I will try to understand the coding…

Seems I’m a bit spoiled by Home Assistant’s auto-generated-everything so far… sorry.

Edit 2: ok, one has to remove everything after “//REMOVE ME”… (I had tried to remove some, did not know how much.)

[hajo62 (Hajo)]

With some help I realizied:

• Is there a way to bring the values above the line? Maybe with a semi transparent background?

• Why can’t I click the value to get the history as in other apex_chart cards?

• When I add a title, the sensor values are shifted outside the card. How to bring the title to the top of the image and the number somewhat to the middle?
  Edit: Just lowering the margin-top does not work. Than the title is cut at the top.
  

  

type: custom:apexcharts-card
header:
  show: true
  title: ''
  floating: true
  show_states: true
  colorize_states: false
graph_span: 4w
series:
  - entity: sensor.database_size
    name: ' '
    color: '#ff444f'
all_series_config:
  type: area
  curve: smooth
  fill_raw: last
  group_by:
    func: raw
    duration: 10min
  show:
    extremas: false
apex_config:
  chart:
    height: 180px
  legend:
    show: false
  grid:
    show: false
  stroke:
    width: 2
  xaxis:
    labels:
      format: MM
      show: false
  yaxis:
    - decimalsInFloat: 0
  fill:
    type:
      - gradient
    gradient:
      type: vertical
      opacityFrom: 0.7
      opacityTo: 0.3
  tooltip:
    x:
      format: HH:mm
style: |
  .wrapper div#header div#states__state:nth-child(2) div#state__value {
    justify-content: end;
  }
  .wrapper div#header div#states__state div#state__value {
    display: flex;
  }
  .wrapper div#header div#states__state:nth-child(1),
  .wrapper div#header div#header__title {
    margin-left: 25%;
    margin-top: 20%;
    font-size: 36pt;
  }

[matteocorti]

Thanks for the card.

Is there a way to draw a horizontal line? (e.g. for a threshold?)

[Lunkobelix]

Yes: ApexCharts card - A highly customizable graph card - #1466 by Lunkobelix

[matteocorti]

If I use a span of 1 year I get data for a very short period (with the default statistics graph I get the complete span). Is there a limitation?

[Lunkobelix]

Yes, the statistics card is using the long term statistics while you get the normal statistics that are deleted after 10 (14?) days. I aksed the same a few days ago: ApexCharts card - A highly customizable graph card - #1470 by Lunkobelix

[matteocorti]

Thanks, I missed it. I’ll wait

[LudoBoyer]

@RomRider
Hello, bonjour

Can you help me, I have a lot of decimals (j’ai beaucoup trop de decimal)

Thanks

type: custom:apexcharts-card
header:
  show: true
  title: ' '
  show_states: false
  colorize_states: true
  floating: false
  standard_format: false
series:
  - entity: sensor.heures_pleines
    name: HP
    color: rgb(64, 142, 192)
    float_precision: 2
  - entity: sensor.heures_creuses
    name: HC
    color: rgb(79,210, 254)
    float_precision: 2
  - entity: sensor.energy_pv_total_daily
    name: Solaire
    color: orange
    float_precision: 2
span:
  end: day
chart_type: donut
apex_config:
  chart:
    height: 170px
  plotOptions:
    pie:
      customScale: 1
      donut:
        size: 75%
        background: grey
        labels:
          show: true
          value:
            show: true
            offsetY: 1
          total:
            label: Total kWh
            fontSize: 13px
            show: true
            showAlways: true
            size: 20
  legend:
    show: false
    position: top
    horizontalAlign: left
    floating: false
    fontSize: 8px
    offsetX: 0
    formatter: |
      EVAL: function (val, opts) {
        return [opts.w.globals.series[opts.seriesIndex], " - ", val, ]
      }
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + "%";
      }

[hajo62 (Hajo)]

@RomRider

span:
  start: hour

I just copied your code above and I wonder why the blue line starts left of the now mark?

Don’t care about the missing orange line with history data. That’s because I don’t safe the history of forecasts. What I’m planning is left of “now” my sensor data and right of “now” forecast data which will look like that - hopefully without the overlap: