ApexCharts card - A highly customizable graph card

This is what I get:

So … dataLabels is not allowed the way you added it, same as grid_options.
dataLabels goes into a section under apex_config and grid_options is not even a apexchart attribute. Have a search in this forum for dataLabels (and remove grid_options for now)
Start simpel, donot filter out errors and add step-by-step else you start searching for needles

EDIT: noting that in using jscript, you need to add eval and sometimes convert the value from string to float, e.g.

      EVAL:function(value, { seriesIndex, dataPointIndex, w }) {
          return "% " + parseFloat(value).toFixed(1)
        }

Thanks for all your help. But unfortunately, it still won’t show me the line n the diagram. No matter what I change or do. It does not show up. :frowning:

I checked “sensor.plenticore_plus_10_battery_soc” and it is saved as a number.

type: custom:apexcharts-card
apex_config:
  chart:
    height: 230px
  legend:
    show: true
yaxis:
  - id: left
    min: ~0
    max: ~500
    decimals: 0
    apex_config:
      tickAmount: 4
      forceNiceScale: true
      title:
        text: W
        rotate: 0
  - id: right
    show: true
    opposite: true
    min: 0
    max: 100
    decimals: 0
    apex_config:
      tickAmount: 5
      forceNiceScale: true
      title:
        text: "%"
        rotate: 0
      yaxis:
        labels:
          formatter: |
            EVAL:function(value, { seriesIndex, dataPointIndex, w }) {
              return "% " + parseFloat(value).toFixed(1)
            }
all_series_config:
  stroke_width: 1
  float_precision: 0
  show:
    in_header: raw
    legend_value: false
  opacity: 0.2
  statistics:
    type: mean
    period: 5minute
span:
  end: minute
graph_span: 24h
header:
  show: true
  title: ""
  show_states: true
  colorize_states: true
  floating: false
series:
  - entity: sensor.plenticore_plus_10_sum_power_of_all_pv_dc_inputs
    name: Solarproduktion
    color: orange
    yaxis_id: left
    type: area
  - entity: sensor.plenticore_plus_10_home_power
    name: Hausverbrauch
    color: purple
    yaxis_id: left
    type: area
  - entity: sensor.plenticore_plus_10_battery_soc
    name: SoC
    color: teal
    yaxis_id: right
    type: line
experimental:
  disable_config_validation: false
card_mod:
  style: |
    div#header__title {
      font-size: 18px;
      margin-top:0.25rem;
      margin-bottom:0.5rem
    }
    div#header__states {
      justify-content: start;
    }
    div#state__value #state{
      font-size: 18px;
      padding-right:5px
    }

Using your code by using my sensors will get a nice chart…

Strange, it does indeed work for you. :grin:

I’m now creating my chart from scratch. Let see if I can sort out the issue.

probably it’s because of your SOC-sensor

I just found out its because of this:

  statistics:
    type: mean
    period: 5minute

when I remove it, the line does show up.

my SoC sensor does not like those lines, so I added them just for my other two sensors.
Now it’s looking the way I want.

1 Like

Not all sensors create statistiscs of all types … you can doublecheck this with the statistics graph
And you are not using dataLabels, have you given up on that?

For those that have been struggling with imported statistics, using the HA-enforced : in the name, with some posts earlier (my thanks to the OPs) above this could be working with the datagenerator.
For me, I have a gas-consumption being imported, data from the provider but always 2-3 delay
On the marked items:

  • the entity can be any entity, it is a dummy entry and is ignored for the results
  • my imported data is in entity: gazpar:gazpar_ etc.
  • you have to provide the statistic entity id twice
  • I am using the state value of the statistic, this can be something else too if you need it (check via statistics graph if it exists or directly in the db)

    data_generator: |
      const stat_entity =
        'gazpar:gazpar_thuis_consumption_stat';
      var statistics = await hass.callWS({
          type: 'recorder/statistics_during_period',
          start_time: new Date(start).toISOString(),
          end_time: new Date(end).toISOString(),
          statistic_ids: [stat_entity],
          period: "hour",
      });
      var stats = statistics[stat_entity];
      var result = [];
      var len = stats.length;
      for (let i = 0; i < len; i++) {
        let stat = stats[i].state;
        result.push([(new Date(stats[i].end).getTime())
          ,stat]);
        }
      return result;

Hello all,
I’m having some issues with a sensor on a plot and hoping someone can help me. Basically, I have a sensor to track the target temperature of my water heater (“Target” in plot below). The sensor works fine in home assistant when I look at it, but when I plot it in apex-charts, portions of it’s history do not appear following a restart or reload of YAML. The hot water target temperature is a template sensor and other sensors on the plot are also template sensors. I have no idea why this one does not plot. My only hypothesis is that it’s a sensor whose value is not changing like the others?

Here is the code for the template sensor:

  - name: "Hot Water Target Temperature"
    unit_of_measurement: "°F"
    device_class: "temperature"
    state_class: "measurement"
    state: "{{state_attr('climate.econet_hpwh_water_heater','temperature')}}"

Below is the code for the chart

type: custom:apexcharts-card
header:
  show: true
  title: Hot Water Temperature & Activity
  show_states: false
  colorize_states: true
span:
  end: minute
graph_span: 24h
yaxis:
  - id: left
    max: ~120
    min: ~100
    decimals: 0
  - id: right
    max: 1
    min: 0
    opposite: true
    show: false
apex_config:
  yaxis:
    labels: false
all_series_config:
  show:
    legend_value: false
series:
  - entity: sensor.hot_water_current_temperature
    type: line
    color: var(--primary-color)
    stroke_width: 2
    name: Current Temperature
    yaxis_id: left
  - entity: sensor.econet_hpwh_lower_tank_temperature
    type: line
    color: var(--accent-color4)
    stroke_width: 2
    name: Lower Temperature
    yaxis_id: left
  - entity: sensor.hot_water_target_temperature
    type: line
    curve: stepline
    stroke_width: 2
    color: var(--accent-color2)
    name: Target
    yaxis_id: left
  - entity: binary_sensor.econet_hpwh_compressor
    transform: "return x === 'on' ? 1 : 0;"
    type: area
    curve: stepline
    stroke_width: 0
    color: var(--accent-color)
    name: Water Heater Running
    opacity: 0.3
    yaxis_id: right
  - entity: switch.recirculating_pump_smart_plug
    transform: "return x === 'on' ? 1 : 0;"
    type: area
    curve: stepline
    stroke_width: 0
    color: var(--accent-color3)
    name: Recirc Pump Running
    opacity: 0.8
    yaxis_id: right

what do you mean…it shows a line, not? And of course it cannot show values when they are not there. Add: fill_raw: last

Sure. There are values captured in the sensor. Nevertheless, the fill_raw: last worked great, so thank you.

great then please mark my post with the solutoin as ‘solution’ so others can benefit as well.

This seems like a very simple thing, but I can’t for the life of me find an answer…

Is there a way to create an area graph with the origin / fill area centered on something other than zero? I’m trying to make a weekly temperature area graph where the line/area is one color when the temperature is above freezing and a different color when the temperature is below freezing.

The graph itself and the color thresholds weren’t too hard to figure out, but the fill area on the graph always center and fill to the zero line. I’m a backwater American though and freezing in Farenheit is 32 - I’d like the fill area to “center” on 32 rather than 0.

Show code and card ?

Code:

type: custom:apexcharts-card
graph_span: 7d1s
span:
  end: day
header:
  show: true
  title: Weekly Temperature
  show_states: true
  colorize_states: true
series:
  - entity: sensor.ecowitt_wh90_outdoor_temperature
    color_threshold:
      - value: 32
        color: blue
      - value: 33
        color: darkorange
    stroke_width: 2
    fill_raw: last
    curve: smooth
    type: area
experimental:
  color_threshold: true

Graph currently looks like this:

What I’m trying to achieve:

This will not work as it fills below the line and you want a combination of above and below. Only option (that I know of) is via ‘line’

EDIT: yes…it does work indeed but only for the below 0 ones…now I get your point…will have a look

It is a bit fiddly as I had to fake a below-zero graph

I am tweaking both the series values as well as the yaxis ones… maybe you can bake cake with this :slight_smile:
i.e. bring the graph below 0 first, then apply the threshold. then fake the yaxis back to Fahrenheit

Clever idea. It seems to have worked visually in that the lines sit in the correct place on the graph, and fill above and below the way I wanted.

The problem now is that if you mouse over the graph to see the temperature value at a specific time, the rollover text will show the modified values (like -3 F), so that’s a bit confusing.

Also that can be tweaked but you have to search in this loooong post. It will however become one tweak after the other and it becomes less and less to manage. For one card OK but …well

EDIt, this issue has nothing to do with F vs C but with values above/below 0