ApexCharts card - A highly customizable graph card

es3nric · March 6, 2024, 5:38pm

just remove “as_duration: hour” and you will get duration in hours only

Faecon · March 7, 2024, 10:05am

I was looking if it is possible to have different colors above and below the x-axis…

this is what I found

Is it possible to do it in HA ?

To configure the ApexCharts chart so that values less than zero are represented with red bars and values greater than zero are represented with green bars, you need to modify the plotOptions section in your options object. Specifically, you should define two separate ranges in the colors section within the plotOptions for the area chart type. Here’s how you can modify your existing options object:
var options = {
    // ... your existing options ...

    plotOptions: {
        area: {
            colors: {
                ranges: [
                    {
                        from: -Infinity, // Any value less than this will be red
                        to: 0,
                        color: "#e85347" // Red color
                    },
                    {
                        from: 0,
                        to: Infinity, // Any value greater than this will be green
                        color: "#1ee0ac" // Green color
                    }
                ]
            },
            columnWidth: "80%"
        }
    },

    // ... rest of your existing options ...
};
In this modified version of your options object, the ranges array in the colors section of the plotOptions now defines two ranges:

Values less than zero will be colored red ("#e85347").

Values greater than or equal to zero will be colored green ("#1ee0ac").

With this configuration, the chart bars will be colored according to your specified conditions.

vaurk · March 7, 2024, 1:43pm

I’m looking to combine the tooltip of my combined chart:

I would like to show both the orange and the blue line in the tooltip but they don’t seem to want to play along. Here’s my code, any ideas?

type: custom:apexcharts-card
graph_span: 24h
header:
  show: true
  title: Badkamer
  show_states: false
  colorize_states: true
yaxis:
  - id: Vochtigheid
    decimals: 0
    min: 50
    max: 100
    apex_config:
      title:
        text: Luchtvochtigheid %
  - id: Temperatuur
    opposite: true
    min: 15
    max: 22
    decimals: 0
    apex_config:
      title:
        text: Temperatuur °C
apex_config:
  legend:
    show: false
  tooltip:
    shared: true
    intersect: false
    enabledOnSeries:
      - 0
      - 1
    x:
      show: false
      format: HH:mm
series:
  - entity: sensor.thermometer_badkamer_luchtvochtigheid
    name: Luchtvochtigheid
    stroke_width: 3
    show:
      legend_value: false
    yaxis_id: Vochtigheid
  - entity: sensor.thermometer_badkamer_temperatuur
    name: Temperatuur
    stroke_width: 3
    show:
      legend_value: false
    yaxis_id: Temperatuur
  - entity: binary_sensor.raamsensor_badkamer_openen
    yaxis_id: Vochtigheid
    transform: 'return x === "on" ? 0 : 100;'
    name: Raam open
    type: area
    color: grey
    opacity: 0.2
    stroke_width: 0
    curve: stepline
    show:
      legend_value: false
      in_header: false
      name_in_header: false
      datalabels: false
  - entity: sensor.verwarming_overloop_aan
    yaxis_id: Vochtigheid
    transform: 'return x === "on" ? 100 : 0;'
    name: Verwarming aan
    type: area
    color: red
    opacity: 0.2
    stroke_width: 0
    curve: stepline
    show:
      legend_value: false
      in_header: false
      name_in_header: false
      datalabels: false

Mar1us · March 7, 2024, 7:13pm

I have a question about the broken yellow line in the apex chart but in the history there is data available. The break in in the green line a a restart of HA.

Code

type: custom:apexcharts-card
header:
  show: true
  title: Kinderzimmer
  show_states: true
  colorize_states: true
series:
  - entity: sensor.kinderzimmer_raumthermostat_temperature
    type: area
    name: Raumtemperatur
    color: rgb(76, 175, 80)
    stroke_width: 2
    opacity: 0.1
  - entity: sensor.heizung_kinderzimmer_temperatur_trv
    name: Zieltemperatur
    color: rgb(255, 193, 7)
    curve: stepline
    stroke_width: 2

Ravenholm · March 9, 2024, 10:36am

I´v got a problem with the x-axis.
It is not centered on the columns as seen i
n the picture.
Also there is no text for Thursday (taken last night).
edit: Second image is from today and that looks even worse… no text and no column

Have been trying to fix it but am all out of ides…

OFFSET
OFFSET2

      - type: custom:apexcharts-card
        apex_config:            
          legend:
            show: false
          dataLabels:
            background:
              borderWidth: 0
              opacity: 0
              foreColor: rgba(228,224,17,1)
              #fontFamily: "Roboto"
            offsetY: -10
          chart:
            fontFamily: "Roboto"
            height: 294px
          grid:
            show: true
            borderColor: rgba(112, 135, 164, 0.5)
          xaxis:
            labels:
              hideOverlappingLabels: false
              rotate: -45
              rotateAlways: true
              showDuplicates: true
              datetimeFormatter:
                year: 'ddd'
                month: 'ddd'
                day: 'ddd'
        header:
          show: true
          title: Produktio
          show_states: false
          colorize_states: true
        hours_12: false
        graph_span: 7d
        span:
          offset: '-1day'
        yaxis:
          - id: kWh
            decimals: 0
            opposite: false
            apex_config:
              tickAmount: 6
             # title:
             #   text: kWh
            min: 0
        series:
          - entity: sensor.daily_yield_total_energy
            type: column
            unit: kWh
            show:
              extremas: false
              datalabels: true
            name: Produktion
            float_precision: 1
          #  stroke_width: 2
            color: rgba(228,224,17,1)
            opacity: 0.7
            yaxis_id: kWh
            group_by:
              duration: 24h
              func: max

complex1 · March 9, 2024, 8:47pm

Your solution I like it very much, but unfortunately the code doesn’t work.
I have successful shift the series for 30 minutes, but have issues with the tooltips.
I don’t know how to troubleshoot it, because my knowledge of Java is very little.
Please help.

Swerfer · March 10, 2024, 10:06am

I have a simple 24h span bar graph. The xaxis time labels have an interval of 5h. How do I change that to a 4h interval? I tried some apex_config, but till now no result.

My YAML:

type: custom:apexcharts-card
graph_span: 24h
header:
  title: Nordpool day-ahead vandaag
  show: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.nordpool_kwh_nl_eur_3_10_0
    name: €
    type: column
    offset: '-30min'
    data_generator: |
      return entity.attributes.raw_today.map((start, index) => {
        return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
      });
apex_config:
  xaxis:
    tickAmount: 6

fabal45 · March 11, 2024, 9:01am

Issue was due to bad state_class on sensor.

vingerha · March 11, 2024, 12:11pm

It only seems to work with type numeric

        apex_config: 
          xaxis:
            type: numeric
            tickAmount: 2

samourai47 · March 11, 2024, 2:15pm

hello
I have a little problem. I modify my recorder from 7 days to 3 days of retention.
I have t2 template energy who are statistics
So before the modification i have this graph with 7 days. But now i just have 3 days and today
13549745c43bee4145a32b6b3a48a5f2b744f301-1
I add the statistics in the card code but i have this error

/// apexcharts-card version 2.0.4 /// value.series[0] is not a ChartCardSeriesExternalConfig value.series[0].statictics is extraneous value.series[0].statictics is extraneous

My card with error

type: custom:apexcharts-card
cache: false
update_interval: 1h
header:
  standard_format: true
  show: false
  title: Consommation HP/HC
  show_states: true
span:
  end: day
graph_span: 7d
stacked: true
apex_config:
  fill:
    opacity: 1
    type: gradient
    gradient:
      shade: light
      type: horizontal
  grid:
    show: true
  xaxis:
    axisBorder:
      show: false
    axisTicks:
      show: false
  yaxis:
    show: true
series:
  - entity: sensor.zlinky_metering_hc
    type: column
    statictics:
      type: sum
      period: day
      align: end
    name: HC
    color: 5A6FE7
    opacity: 1
    group_by:
      duration: 1d
      func: diff
    show:
      datalabels: true
  - entity: sensor.zlinky_metering_hp
    type: column
    statictics:
      type: sum
      period: day
      align: end
    name: HP
    color: EA4234
    opacity: 1
    group_by:
      duration: 1d
      func: diff
    show:
      datalabels: true

Can you help me?
Thank’s

LightBringer81 · March 11, 2024, 9:03pm

I don’t know if it was already asked, but is it possible to place the candlestick charts instead of centered to the value, left- or rightbound?
Like on this example, the first column should be placed like the purple one, the second, like the blue, the third like the orange, etc.

OK, I’m blind, someone just had a similar issue a few posts above and I managed to implement it now with a 30 min offset, however now I have a problem in the header, where it wouldn’t show the current hour price but also a 30 minute offset price.

Faecon · March 12, 2024, 7:27pm

is it possible to have a different entity in the title (different from the chart entity) ?

Holdestmade · March 14, 2024, 1:35pm

Does anyone know if it is possible to sort the entities in a donut chart, based on state ?

Alex-SugarRC · March 16, 2024, 1:17pm

Dear community. I am new to Home Assistant and I need help with some questions.

screen
I want the minimum value on the chart to be visible (see screenshot). I.e. the vertical scale should have at least 0.1 margin and not start from the lowest value at the moment. I could use the code:

id: EUR
decimals: 3
min: 0.1

but in this case the chart does not look nice. It is important to me that the minimum value of -0.1 is used to plot the chart, so that the slag of the minimum value can also be seen.

Faecon · March 17, 2024, 9:00am

I was looking for some code ( on chat gpt ) for having different color above and below the x-axis

type: custom:apexcharts-card
graph_span: 12
header:
  show: true
  title: My Chart
      series:
        - entity: sensor.p1_meter_5c2faf04a1f2_actueel_vermogen
          type: area
          name: Actueel Verbruik
          data_generator: |
            (entity, stateObj, attributes, ha) => {
              return ha.states[entity].attributes.data.map(entry => entry.value);
            }
apex_config:
  fill:
    type: gradient
    gradient:
      shadeIntensity: 1
      opacityFrom: 0.7
      opacityTo: 0.9
      stops: [0, 100]
    colors: |
      (value, seriesIndex, w) => {
        if (value < 0) {
          return "#FF0000"; // Red for values below the x-axis
        } else {
          return "#008000"; // Green for values above or equal to the x-axis
        }
      }

the code isn’t looking that strange, but it is not working. It stays on loading. what is wrong with it ?

RedWheiler · March 18, 2024, 5:43pm

Is it possible to get my bar-colors by percent of a sensor-value?

Like 60% of sensor.highprice = orange / 80% of sensor.highprice = red.

stintov · March 18, 2024, 8:45pm

Hello,

Apologies if this has already been answered but I can’t find the answer.

Is it possible to enforce each legend item onto it’s own line. Ie. so the legend does wrap.I want each sensor to have it’s own line.
Also is it possible to order the legend by value? Highest to lowest

Thanks in advance.

justinhow · March 19, 2024, 9:24pm

I have just found this very cool graphing HA lovelace add on which I am currently using for some Tado thermostat temperature readings.
One question I have is that I am seeing some quite big gaps in the graph where presumably HA did not receive data from Tado for some reason - which in itself is rather strange as I can’t see the same large gaps on the HA built in history graphs.
Is there any way around this. e.g. joining up the gaps etc?
Sorry if this is discussed above but this is a seriously long discussion thread now.

vandermark · March 21, 2024, 2:29pm

I am struggling with the ‘update_interval’ setting:
Where in my config should i put this setting in the following card:

type: custom:config-template-card
variables:
  - states['input_select.hours_to_show_2'].state
entities:
  - input_select.hours_to_show_2
  - sensor.electricity_meter_power_consumption
  - sensor.electricity_meter_power_production
  - sensor.electricity_meter_power_production_phase_l1
  - sensor.pana_vermogen_kw
card:
  type: custom:apexcharts-card
  apex_config:
    chart:
      height: 450%
  header:
    show: true
    title: Electra
  all_series_config:
    stroke_width: 1
  graph_span: ${vars[0]}
  series:
    - entity: sensor.electricity_meter_power_consumption
      name: Afname Totaal
      color: orange
      curve: stepline
      fill_raw: zero
    - entity: sensor.electricity_meter_power_production
      name: Productie Totaal
      color: 76c0f5
      curve: stepline
    - entity: sensor.electricity_meter_power_production_phase_l1
      name: Productie Fase 1
      color: green
      curve: stepline
    - entity: sensor.pana_vermogen_kw
      name: Warmtepomp
      color: f07b73
      curve: stepline
  yaxis:
    - min: 0
      max: ~3
      decimals: 1
      apex_config:
        tickAmount: 15
        forceNiceScale: true

AngeloA · March 21, 2024, 9:28pm

Is there a way to change the date format on the xaxis from day/month to month/day as is customary in the US?