ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
3875

stacking is more or less dead in the current version of the integration. You must use a previous version that is working. The error has occured a while ago and is still there so search for apex stacking not working and you should find it, but at least till last months aka october there was no other solution than going back.

I wante to stack something last month and it did also not work out and it is known that stacking is causing some bizarre and weird behavious or malfunction in charts that had been working fine before.

Good luck, but I suggest to choose a different layout.

1 Like
3876

TIBBER DAY AHEAD PRICES GRAPH with “flag” incl. time & current price

I had to tweak it a bit cause this “now” features looks like a HA special feature without the usual attributes availiable like font, size, bold and so on . Just the attributes on the github page of the HA integration.

image

The blue flagg moves ahead as the day continues and shows the currrent price like here 31,2 cent while the graph is covered by the flag.

Of cause it is also visible on the y axis description too, but the more the day progresses the further away the blue flagg moves to the right and during afternoon and evening the connection gets lost that this value is the current price.

Hence the blue flag with the price and time.
Only piece missing is an adjustable x axis labeling like every 6th hours a time, which would mean 3 label with 4 time spans of 6 hours each day but I could not figure that out (or at least for this type over 48 hours = 2days, where I have cut off the second day in this screenshot here)

Any ideas ?

type: custom:card-templater
update_interval: 60s
entities:
  - sensor.tibber_prices
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true
  apex_config:
    xaxis:
      labels:
        style:
          colors: black
          fontSize: 16px
          fontWeight: normal
        tickAmount: 8
    grid:
      show: true
      borderColor: black
      position: back
      yaxis:
        lines:
          show: false
      xaxis:
        lines:
          show: true
      row:
        colors:
          - lightgrey
          - transparent
        opacity: 0.95
      column:
        colors:
          - blue
          - transparent
    chart:
      height: 260px
    tooltip:
      enabled: true
      followCursor: false
      x:
        show: false
      fixed:
        enabled: true
  graph_span: 50.76h
  span:
    start: day
    offset: +0d
  now:
    show: true
    label_template: >-
      {% set spacs1 = "⠀" %}    {% set spacs2 = " ⠀" %}    {% set spacs4 = "  
      ⠀" %}    {% set spacs6 = "   ⠀  " %}    {% set price = int ( 1000 *
      float(states('sensor.tibber_prices')) | round(3)) / 10 %}   {{ spacs1 }}{{
      now().strftime("%H:%M")}}{{ spacs6 }}{{ spacs4 }}{{ spacs6 }}{{ price }}
      Cent{{ spacs4 }} 
    color: blue
  header:
    show: true
    show_states: true
    colorize_states: false
    standard_format: false
  yaxis:
    - min: 15
      max: ~55
      decimals: 0
      apex_config:
        tickAmount: 8
  series:
    - entity: sensor.tibber_prices
      name: Preis
      unit: "\_\_Cent / kWh"
      show:
        in_header: before_now
        name_in_header: false
        extremas: true
      color_threshold:
        - value: 0
          color: 4DD0E1
        - value: 10
          color: 26A69A
        - value: 15
          color: 4CAF50
        - value: 20
          color: 7CB342
        - value: 25
          color: FBC02D
        - value: 30
          color: EF6C00
        - value: 40
          color: B71C1C
      type: line
      curve: stepline
      extend_to: false
      stroke_width: 4
      float_precision: 1
      data_generator: >
        const noon = new Date()

        noon.setHours(0, 0, 0, 0)   

        const prices =
        entity.attributes.today.concat(entity.attributes.tomorrow); const data =
        []; for(let i = 0; i < prices.length; i++) {
          data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
        } return data;
3877

I’m fairly new to ApexCharts and want something easy but have no clue how to solve it. Also I can’'t find any examples.
I have a heatpump and created utility sensors for power output (quatt_warmte_uit) and power in (quatt_kwh) and created a monthly graph reporting power out and in per day

1000014926
10000149261262×1010 122 KB

But what I also want is display the CoP (power out / power in). But have no idea how to solve this and can’'t find any examples. So any help is highly appreciated.

type: custom:apexcharts-card
cache: true
header:
  standard_format: false
  show: true
  show_states: true
  colorize_states: true
  title: Quatt performance afgelopen maand
stacked: false
graph_span: 1month
span:
  end: day
update_interval: 1h
apex_config:
  legend:
    show: false
yaxis:
  - id: power
    show: true
    apex_config:
      tickAmount: 5
    opposite: false
    min: 0
  - id: CoP
    show: true
    apex_config:
      tickAmount: 5
    opposite: true
all_series_config:
  type: column
  extend_to: false
  stroke_width: 3
  statistics:
    type: change
    period: day
  float_precision: 2
series:
  - entity: sensor.quatt_warmte_uit
    yaxis_id: power
    name: Warmte afgifte
    extend_to: false
    color: steelblue
  - entity: sensor.quatt_kwh
    yaxis_id: power
    name: Electra gebruik
    extend_to: false
    color: orange
3878

Can’t be done in the graph, create a template sensor for the CoP and use that in the graph

3879

Thanks, thats a pity. A CoP is based on a time delta (hour, day, week, month) so difficult to capture in a sensor and can’'t be cumulated. And the graph already calculated the delta values.

3880

Hi.
I have the same problem here. Do you have any idea how to format the header and tooltip to only hours and minutes?

3881

I saw an issue on the github about this and there was some work on it, but it closed without mention if it works. I am looking to be able to plot external influxdb data in apexchart-card without having it as a sensor. Is this possible now?

3882

Hi. Anyone would know why this simple chart of automation current attribute still returns the value of N/A and so there is no line in the chart?

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
series:
  - entity: automation.my_automation_name
    attribute: current

This template normally returns 0 of type number.

{{ state_attr('automation.my_automation_name', 'current') }}

Other attribute charts work but this automation current one doesn’t.
I am aware of the solution of creating a template sensor based on the automation current attribute - but still would like to know why apex cannot read the values of this attribute from the DB.
Could anyone try a quick apex chart based on an automation current attribute to see if it behaves the same? Thx.

3883

I would like to display a column graph with multiple sensors and use the sensors as xaxis categories. Is there a way todo that and not use time as scale?

Something similar to this (mini-graph-card).

image
image872×424 8.21 KB

3884

Is it possible to show in pie / donut chart type entity name instead of its value?
I would like to have pie chart with names only (values wiil be at legend only).
image

3885

I am not the specialist in this area but you can use this to show the label that you defined for your series, the example below adds the value too but you can apply whatever you want

  dataLabels:
    formatter: |
      EVAL: function (value, opt) {
        if (opt.w.config.series[opt.seriesIndex] >= 1000) {
          return opt.w.config.labels[opt.seriesIndex] + ": " + (opt.w.config.series[opt.seriesIndex] / 1000).toFixed(2) + " " + " kW" ;
        } else if (opt.w.config.series[opt.seriesIndex] < 1000) {
          return opt.w.config.labels[opt.seriesIndex] + ": " + opt.w.config.series[opt.seriesIndex].toFixed(0) + " " + " W" ;
        }
      }

EDIT: this is more than what you asked for but also a demonstration of what one could do to the labels

1 Like
3886

Hey there team. I am trying to apply a theme to the card. Where would I enter the the theme details to match the rest of the cards? I don’t want to apply the theme to the entire dashboard because I have a custom background.

type: custom:apexcharts-card
header:
  show: true
  title: Power Usage and $
  show_states: true
  colorize_states: true
series:
  - entity: sensor.panel1_123_1min
  - entity: sensor.current_bill_electric_cost_to_date
  - entity: sensor.current_bill_electric_forecasted_usage
  - entity: sensor.current_bill_electric_forecasted_cost
update_interval: 30s
graph_span: 24hrs
span:
  start: day
cache: true
apex_config:
  stroke:
    width: 2
    curve: smooth
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
    fontFamily: Julius Sans One
3887

Did you get a solution for this?
Also interested in this design and function.

3889

Not yet, still searching. I found this but not quite what I’m looking to achieve.

3890

Thanks! You are a hero :partying_face: I spent so many hours troubleshooting this; unbelievable how blind enough code can make you

3891

Hi. Thanks for a great project.

I am having some trouble working with the data_generator.

I am trying to read output of the GitHub - toringer/home-assistant-met-next-6-hours-forecast: Met.no next 6 hours forecast component for Home Assistant integration, which gives the forecast as a json text.

I would like to plot the temperature of this forecast and so need to parse the datetime string and native_temperature fo the json object, which looks like this:

forecast_json: [{"native_temperature": 2.8, "native_templow": 1.1, "native_precipitation": 3.5, "precipitation_probability": 86.0, "datetime": "2024-11-17T16:00:00+00:00", "condition": "snowy-rainy", "native_pressure": 987.6, "wind_bearing": 321.1, "native_wind_speed": 8.1}, {"native_temperature": 2.7, "native_templow": 1.7, "native_precipitation": 6.9, "precipitation_probability": 99.6, "datetime": "2024-11-17T22:00:00+00:00", "condition": "snowy-rainy", "native_pressure": 989.6, "wind_bearing": 276.8, "native_wind_speed": 7.3}, {"native_temperature": 2.0, "native_templow": 1.3, "native_precipitation": 16.5, "precipitation_probability": 97.2, "datetime": "2024-11-18T04:00:00+00:00", "condition": "snowy-rainy", "native_pressure": 986.9, "wind_bearing": 291.1, "native_wind_speed": 7.3}, {"native_temperature": 2.0, "native_templow": 1.3, "native_precipitation": 3.9, "precipitation_probability": 84.9, "datetime": "2024-11-18T10:00:00+00:00", "condition": "snowy-rainy", "native_pressure": 990.9, "wind_bearing": 318.6, "native_wind_speed": 8.3}, {"native_temperature": 1.0, "native_templow": 0.6, "native_precipitation": 1.4, "precipitation_probability": 69.5, "datetime": "2024-11-18T16:00:00+00:00", "condition": "snowy", "native_pressure": 993.2, "wind_bearing": 210.1, "native_wind_speed": 3.0}, {"native_temperature": 0.9, "native_templow": -0.1, "native_precipitation": 0.0, "precipitation_probability": 43.6, "datetime": "2024-11-18T22:00:00+00:00", "condition": "cloudy", "native_pressure": 991.0, "wind_bearing": 169.5, "native_wind_speed": 4.0}, {"native_temperature": -0.4, "native_templow": -1.4, "native_precipitation": 0.0, "precipitation_probability": 27.1, "datetime": "2024-11-19T04:00:00+00:00", "condition": "partlycloudy", "native_pressure": 992.7, "wind_bearing": 56.5, "native_wind_speed": 1.9}, {"native_temperature": -0.1, "native_templow": -2.1, "native_precipitation": 0.0, "precipitation_probability": 10.6, "datetime": "2024-11-19T10:00:00+00:00", "condition": "partlycloudy", "native_pressure": 995.2, "wind_bearing": 179.2, "native_wind_speed": 1.7}, {"native_temperature": -2.2, "native_templow": -3.2, "native_precipitation": 0.0, "precipitation_probability": 6.6, "datetime": "2024-11-19T16:00:00+00:00", "condition": "partlycloudy", "native_pressure": 996.2, "wind_bearing": 167.9, "native_wind_speed": 1.9}, {"native_temperature": -1.6, "native_templow": -3.3, "native_precipitation": 0.0, "precipitation_probability": 2.0, "datetime": "2024-11-20T00:00:00+00:00", "condition": "partlycloudy", "native_pressure": 997.0, "wind_bearing": 216.8, "native_wind_speed": 0.7}, {"native_temperature": -1.9, "native_templow": -3.5, "native_precipitation": 0.0, "precipitation_probability": 3.9, "datetime": "2024-11-20T06:00:00+00:00", "condition": "partlycloudy", "native_pressure": 1001.8, "wind_bearing": 107.5, "native_wind_speed": 3.4}, {"native_temperature": -1.9, "native_templow": -3.0, "native_precipitation": 0.0, "precipitation_probability": 3.9, "datetime": "2024-11-20T12:00:00+00:00", "condition": "cloudy", "native_pressure": 1002.7, "wind_bearing": 74.2, "native_wind_speed": 4.2}, {"native_temperature": -3.0, "native_templow": -4.0, "native_precipitation": 0.0, "precipitation_probability": 5.9, "datetime": "2024-11-20T18:00:00+00:00", "condition": "cloudy", "native_pressure": 1002.9, "wind_bearing": 67.1, "native_wind_speed": 4.4}, {"native_temperature": -3.8, "native_templow": -5.2, "native_precipitation": 0.0, "precipitation_probability": 11.8, "datetime": "2024-11-21T00:00:00+00:00", "condition": "cloudy", "native_pressure": 1001.9, "wind_bearing": 61.7, "native_wind_speed": 4.5}, {"native_temperature": -4.3, "native_templow": -5.3, "native_precipitation": 0.0, "precipitation_probability": 15.7, "datetime": "2024-11-21T06:00:00+00:00", "condition": "cloudy", "native_pressure": 998.7, "wind_bearing": 53.1, "native_wind_speed": 4.7}, {"native_temperature": -4.3, "native_templow": -4.7, "native_precipitation": 0.0, "precipitation_probability": 27.5, "datetime": "2024-11-21T12:00:00+00:00", "condition": "cloudy", "native_pressure": 994.6, "wind_bearing": 36.4, "native_wind_speed": 4.6}, {"native_temperature": -4.7, "native_templow": -5.9, "native_precipitation": 0.0, "precipitation_probability": 35.3, "datetime": "2024-11-21T18:00:00+00:00", "condition": "cloudy", "native_pressure": 991.5, "wind_bearing": 29.2, "native_wind_speed": 4.6}, {"native_temperature": -5.5, "native_templow": -6.6, "native_precipitation": 2.0, "precipitation_probability": 25.5, "datetime": "2024-11-22T00:00:00+00:00", "condition": "snowy", "native_pressure": 989.0, "wind_bearing": 33.6, "native_wind_speed": 4.1}, {"native_temperature": -5.3, "native_templow": -6.6, "native_precipitation": 0.0, "precipitation_probability": 11.8, "datetime": "2024-11-22T06:00:00+00:00", "condition": "cloudy", "native_pressure": 985.5, "wind_bearing": 61.0, "native_wind_speed": 2.3}, {"native_temperature": -5.2, "native_templow": -6.2, "native_precipitation": 0.0, "precipitation_probability": 13.7, "datetime": "2024-11-22T12:00:00+00:00", "condition": "cloudy", "native_pressure": 985.3, "wind_bearing": 203.7, "native_wind_speed": 2.0}, {"native_temperature": -5.2, "native_templow": -7.1, "native_precipitation": 0.0, "precipitation_probability": 21.6, "datetime": "2024-11-22T18:00:00+00:00", "condition": "cloudy", "native_pressure": 985.6, "wind_bearing": 205.5, "native_wind_speed": 2.1}, {"native_temperature": -5.1, "native_templow": -6.3, "native_precipitation": 0.0, "precipitation_probability": 13.7, "datetime": "2024-11-23T00:00:00+00:00", "condition": "cloudy", "native_pressure": 987.4, "wind_bearing": 199.7, "native_wind_speed": 2.1}, {"native_temperature": -3.4, "native_templow": -5.5, "native_precipitation": 0.0, "precipitation_probability": 13.7, "datetime": "2024-11-23T06:00:00+00:00", "condition": "cloudy", "native_pressure": 988.2, "wind_bearing": 199.8, "native_wind_speed": 2.0}, {"native_temperature": -3.4, "native_templow": -5.3, "native_precipitation": 0.0, "precipitation_probability": 23.5, "datetime": "2024-11-23T12:00:00+00:00", "condition": "cloudy", "native_pressure": 989.1, "wind_bearing": 201.3, "native_wind_speed": 2.3}, {"native_temperature": -3.7, "native_templow": -5.8, "native_precipitation": 0.0, "precipitation_probability": 25.5, "datetime": "2024-11-23T18:00:00+00:00", "condition": "cloudy", "native_pressure": 990.2, "wind_bearing": 200.3, "native_wind_speed": 2.4}, {"native_temperature": -3.7, "native_templow": -6.7, "native_precipitation": 0.0, "precipitation_probability": 19.6, "datetime": "2024-11-24T00:00:00+00:00", "condition": "partlycloudy", "native_pressure": 992.3, "wind_bearing": 196.8, "native_wind_speed": 2.3}, {"native_temperature": -1.6, "native_templow": -5.4, "native_precipitation": 0.0, "precipitation_probability": 15.7, "datetime": "2024-11-24T06:00:00+00:00", "condition": "cloudy", "native_pressure": 993.7, "wind_bearing": 198.0, "native_wind_speed": 2.6}, {"native_temperature": -1.6, "native_templow": -3.3, "native_precipitation": 0.0, "precipitation_probability": 19.6, "datetime": "2024-11-24T12:00:00+00:00", "condition": "cloudy", "native_pressure": 992.7, "wind_bearing": 199.3, "native_wind_speed": 2.7}, {"native_temperature": -2.2, "native_templow": -3.2, "native_precipitation": 0.0, "precipitation_probability": 27.5, "datetime": "2024-11-24T18:00:00+00:00", "condition": "cloudy", "native_pressure": 994.7, "wind_bearing": 199.6, "native_wind_speed": 2.7}, {"native_temperature": -2.2, "native_templow": -4.0, "native_precipitation": 1.7, "precipitation_probability": 25.5, "datetime": "2024-11-25T00:00:00+00:00", "condition": "snowy", "native_pressure": 994.5, "wind_bearing": 200.5, "native_wind_speed": 2.6}, {"native_temperature": -1.8, "native_templow": -4.8, "native_precipitation": 0.0, "precipitation_probability": 17.6, "datetime": "2024-11-25T06:00:00+00:00", "condition": "partlycloudy", "native_pressure": 994.7, "wind_bearing": 203.8, "native_wind_speed": 2.9}, {"native_temperature": -1.4, "native_templow": -1.8, "native_precipitation": 0.0, "precipitation_probability": 23.5, "datetime": "2024-11-25T12:00:00+00:00", "condition": "cloudy", "native_pressure": 998.8, "wind_bearing": 206.5, "native_wind_speed": 2.8}, {"native_temperature": -0.4, "native_templow": -1.5, "native_precipitation": 1.5, "precipitation_probability": 23.5, "datetime": "2024-11-25T18:00:00+00:00", "condition": "snowy", "native_pressure": 999.2, "wind_bearing": 199.2, "native_wind_speed": 3.0}, {"native_temperature": -0.4, "native_templow": -1.4, "native_precipitation": 0.0, "precipitation_probability": 31.4, "datetime": "2024-11-26T00:00:00+00:00", "condition": "cloudy", "native_pressure": 998.7, "wind_bearing": 198.4, "native_wind_speed": 3.0}, {"native_temperature": -0.5, "native_templow": -1.9, "native_precipitation": 0.0, "precipitation_probability": 17.6, "datetime": "2024-11-26T06:00:00+00:00", "condition": "cloudy", "native_pressure": 1002.7, "wind_bearing": 199.0, "native_wind_speed": 3.0}, {"native_temperature": -0.5, "native_templow": -1.4, "native_precipitation": 0.0, "precipitation_probability": 25.5, "datetime": "2024-11-26T12:00:00+00:00", "condition": "cloudy", "native_pressure": 1003.6, "wind_bearing": 201.6, "native_wind_speed": 3.0}, {"native_temperature": -0.8, "native_templow": -2.4, "native_precipitation": 0.0, "precipitation_probability": 25.5, "datetime": "2024-11-26T18:00:00+00:00", "condition": "partlycloudy", "native_pressure": 1008.8, "wind_bearing": 200.9, "native_wind_speed": 3.2}, {"native_temperature": -1.0, "native_templow": -4.5, "native_precipitation": 2.0, "precipitation_probability": 31.4, "datetime": "2024-11-27T00:00:00+00:00", "condition": "snowy", "native_pressure": 1008.5, "wind_bearing": 204.4, "native_wind_speed": 2.9}, {"native_temperature": -0.3, "native_templow": -2.8, "native_precipitation": 0.0, "precipitation_probability": 25.5, "datetime": "2024-11-27T06:00:00+00:00", "condition": "cloudy", "native_pressure": 1012.2, "wind_bearing": 202.9, "native_wind_speed": 2.8}]

Notice how datetime has a “T” between the day and the hour, making this a non-standard timestamp.

What I have tried is:

  data_generator: |
       let p=[]; 
       let forecast = entity.attributes.forecast_json ;
       for (var i=0; i<8;i++) 
       {
         // datetime is format as "2024-11-17T19:00:00+00:00 
         let curDate = forecast[i].datetime;
         p[i] = [moment(curDate,'YYYY-MM-DDTHH:mm:ss+00:00').valueOf(),forecast[i].native_temperature]; 
       } 
       return p;

but nothing is displayed.

If I remove the formatting string '‘YYYY-MM-DDTHH:mm:ss+00:00’ from moment()
the plot becomes a vertical line, which to me indicates that there is something not right about the reading of the timestamps.

Any idea what this does not work?

(In cases like this, do I have any way of debugging the javascript code in the data_generator field?)

3892

Can someone please advise how to hide series value from header?
I know how to hide name but not this one…

image

3893

It is in the documentation search for header, not sure why you could not find this yourselves tbh

3894 
            header:
              show: true
              show_states: false
            series:
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
                name: Rain Now
                color: deepskyblue
                type: column
                show:
                  name_in_header: true
                  in_header: false
                  datalabels: true
                  in_chart: true
                  legend_value: false
                  extremas: false
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
                name: Rain Last 24 Hours
                color: deepskyblue
                type: column
                show:
                  name_in_header: true
                  datalabels: false
                  in_chart: false
                  legend_value: false

         - type: custom:apexcharts-card
            graph_span: 24h
            span:
              end: hour
            header:
              show: true
              show_states: true
            apex_config:
              fill:
                type: gradient
                gradient:
                  type: vertical
                  shadeIntensity: 0
                  opacityFrom: 1
                  opacityTo: 0.5
                  stops: 10
              chart:
                height: 150px
              grid:
                show: false
                borderColor: darkslateblue
                strokeDashArray: 2
              dataLabels:
                background:
                  borderWidth: 0
                  opacity: 0
                  foreColor: white
                offsetY: -10
              plotOptions:
                bar:
                  borderRadius: 0
                  dataLabels:
                    position: top
            series:
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
                name: Rain Now
                color: deepskyblue
                type: column
                group_by:
                  func: raw
                  duration: 1d
                  fill: zero
                statistics:
                  type: state
                  period: hour
                  align: end
                show:
                  name_in_header: true
                  datalabels: true
                  in_chart: true
                  legend_value: false
                  extremas: false
              - entity: sensor.netatmo_devonport_tas_indoor_rain_rain_last_hour
                name: Rain Last 24 Hours
                color: deepskyblue
                type: column
                group_by:
                  func: sum
                  duration: 24h
                  fill: zero
                statistics:
                  type: state
                  period: hour
                  align: end
                show:
                  name_in_header: true
                  datalabels: false
                  in_chart: false
                  legend_value: false
1 Like
3895

Thank you this is what I needed.

@vingerha I did search in doco - but (perhapsim blind) but coudnt find that.