ApexCharts card - A highly customizable graph card

This is not the correct thread for that, you would need a template, start another item in the forum, people are there to help.

1 Like

Hi,

is it possible to set the zero point of the right y-axis to the zero point of the left y-axis?

Much appreciated,
Michael

02-07-2024_16-03-40

Following code is used to create a radial bar that dynamically changes the gradient color from blue to red based on the entity value which is a boiler temperature.
For example the right one I would expect to be blue because the temperature is 28 and the left looks good but once the temperature drops, it becomes like the right one.

How can I get the thresholds and stops so that they change color based on the temperature vs the max 80?
Example 1)
On temp 50 the radial should be blue, orange and starting to become red.
Example 2)
On 30 it should go from dark blue to medium blue, hence no orange or red like to picture!

image

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.boiler_apartment_temperature
        color_threshold:
          - value: 0
            color: '#0000FF'
          - value: 20
            color: '#0000FF'
          - value: 30
            color: '#007FFF'
          - value: 40
            color: '#FFA500'
          - value: 50
            color: '#FF0000'
          - value: 60
            color: '#FF0000'
        show:
          legend_value: false
        max: 80
    apex_config:
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -108
          endAngle: 108
          hollow:
            size: 70%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            strokeWidth: 80%
            margin: 0
      fill:
        type: gradient
        gradient:
          shade: dark
          type: radial
          shadeIntensity: 0.5
          inverseColors: true
          opacityFrom: 1
          opacityTo: 1
          colorStops:
            - offset: 0
              color: '#0000FF'
            - offset: 25
              color: '#007FFF'
            - offset: 50
              color: '#FFA500'
            - offset: 100
              color: '#FF0000'
      stroke:
        lineCap: round
      legend:
        show: false
      chart:
        height: 240
  - type: custom:mushroom-template-card
    multiline_secondary: false
    entity: sensor.boiler_apartment_temperature
    layout: vertical
    primary: |
      {{states('sensor.boiler_apartment_temperature')}} °C
    secondary: |
      Boiler: {{states('switch.ariston_apartment_power')}}
    icon: |-
      {% if states('sensor.boiler_apartment_temperature')  | float < 40 %}
        mdi:thermometer-alert
      {% else %}
        mdi:thermometer
      {% endif %}
    icon_color: |-
      {% if states('sensor.boiler_apartment_temperature')  | float > 55 %}
        red
      {% elif states('sensor.boiler_apartment_temperature')  | float > 45 %}
        orange
      {% else %}
        blue
      {% endif %}
    card_mod:
      style: |
        ha-card {
          margin-top: -120px !important;
          width: 120px !important;
          margin-left: auto !important;
          margin-right: auto !important;
          border-width: 0px !important;
        }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          entity: switch.ariston_apartment_power
    double_tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          entity: water_heater.apartment

Hello!

I like the ApexCharts integration and I try to fill up a graph with data from my own custom template sensor with constant values. The values are measured by “hand” and written down. Later I want to add automatic measured values, but for now, I try to get this simple scenario running.

The template is basic and returns a monthly hot-water usage:

sensor:
  - platform: template
    sensors:
      warmwasser_2023_24:
        unit_of_measurement: kWh
        value_template: >
          values: 
            - time: '2023-01-01T10:00:00+00:00'
              value: 495.0
            - time: '2023-02-01T10:00:00+00:00'
              value: 420.0
            - time: '2023-03-01T10:00:00+00:00'
              value: 461.0
            - time: '2023-04-01T10:00:00+00:00'
              value: 169.0
            - time: '2023-05-01T10:00:00+00:00'
              value: 84.0
            - time: '2023-06-01T10:00:00+00:00'
              value: 37.0
            - time: '2023-07-01T10:00:00+00:00'
              value: 37.0
            - time: '2023-08-01T10:00:00+00:00'
              value: 31.0
            - time: '2023-09-01T10:00:00+00:00'
              value: 37.0
            - time: '2023-10-01T10:00:00+00:00'
              value: 54.0
            - time: '2023-11-01T10:00:00+00:00'
              value: 454.0
            - time: '2023-12-01T10:00:00+00:00'
              value: 733.0
            - time: '2024-01-01T10:00:00+00:00'
              value: 667.0
            - time: '2024-02-01T10:00:00+00:00'
              value: 419.0
            - time: '2024-03-01T10:00:00+00:00'
              value: 216.0
            - time: '2024-04-01T10:00:00+00:00'
              value: 173.0
            - time: '2024-05-01T10:00:00+00:00'
              value: 120.0

Now I try to show these values in a chart (a simple check, if it’s working):

type: custom:apexcharts-card
graph_span: 1y
header:
  show: true
  title: Warmwasser Z9
  show_states: true
  colorize_states: true
series:
  - entity: sensor.warmwasser_2023_24
    name: Warmwasser
    type: line
    data_generator: |
      return entity.attributes.values.map((entry) => {
        return [new Date(entry.time).getTime(), entry.value];
      });

However, it’s not working. I get an endless “loading…” inside the chart:

grafik

I tried two different structures (values as two arrays with an index-access, and the way from above). All time I get a “loading…” without any error.

Maybe I misunderstood something. I googled a lot to find similar examples (most are API-driven) but I don’t get it running.

TIA for any hint.

Never seen this before and although I believe to be more than medioicrate in HA usage, I doubt this will work… what does the sensor itself show?

Hm, it’s more or less documented here:

With the statement:

So, maybe I missed something in the declaration of a sensoror I did something wrong.

Nothing. And unfortunately the data generator is never called (I added a console output, but nothing happens).

It’s unclear to me what type of sensor is meant in the documentation, and my guess was to try a template.

Exactly, I have not seen a template setup work like that. and since not data in sensor, no graph. So you first have to make sure that your sensor gets properly created and I have no clue what your data-source is and how that looks like wrt to format.
Sensor-creation is not part of this thread (apex only) so I would suggest to create another post in the forum to get that supported.

image

How to change size of the header values?

Hi

A dumb question. I see a lot of transform usages like this:

transform: 'return (x === 0 ? 12 :  x);'

But then, this doesn’t seem to work:

transform: 'return (x>0 ? x : 0);'

Any ideas?

Best Eric

I’m trying to get create a graph that shows the time from midnight to the current time on its bottom axis. I have searched but can’t find the appropriate solution.

This is my current code:

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
header:
  show: true
  title: Consumption vs Generation
  show_states: true
  colorize_states: true
graph_span: 24h
chart_type: line
update_interval: 5min
all_series_config:
  stroke_width: 2
span:
  start: day
  offset: +4min
series:
  - entity: sensor.power_photovoltaics_rounded
    name: Energy Generated
    color: green
    extend_to: now
  - entity: sensor.power_load_negative_to_positive_conversion
    name: Energy Consumed
    color: red
    extend_to: now

I have included a screenshot showing how the card currently looks. Note the blank space on the right.

Thank you in advance!

Hi, I’m having issues using color threshold: colors are overlayed and not blended as expected. Maybe something wrong in card setting?
image

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 24h
header:
  show: true
  show_states: true
  colorize_states: true
apex_config:
  legend:
    show: false
  dataLabels:
    enabled: false
all_series_config:
  stroke_width: 3
  extend_to: now
  show:
    extremas: true
series:
  - entity: sensor.thermal_comfort_humidex
    name: EXT humidex
    fill_raw: last
    color_threshold:
      - value: 45
        color: red
      - value: 40
        color: orange
      - value: 30
        color: yellow
      - value: 20
        color: green
      - value: 10
        color: blue
    show:
      legend_value: false
  - entity: sensor.thermal_comfort_cameretta_humidex
    name: Cameretta humidex
    fill_raw: last
    color_threshold:
      - value: 10
        color: blue
      - value: 20
        color: green
      - value: 30
        color: yellow
      - value: 40
        color: orange
      - value: 45
        color: red
    show:
      legend_value: false
  - entity: sensor.thermal_comfort_soggiorno_humidex
    name: Soggiorno humidex
    fill_raw: last
    color_threshold:
      - value: 10
        color: blue
      - value: 20
        color: green
      - value: 30
        color: yellow
      - value: 40
        color: orange
      - value: 45
        color: red
    show:
      legend_value: false

This is a sample code taken from some earlier post describing a good example of a normal data_generator structure

      - type: custom:apexcharts-card
        graph_span: 8d
        span:
          start: hour
        apex_config:
          dataLabels:
            enabled: true
        header:
          show: true
          title: Precipitation Forecast
        series:
          - entity: weather.home
            type: column
            data_generator: |
              return entity.attributes.forecast.map((entry) => {
                return [new Date(entry.datetime), entry.precipitation];
              });

I wish to make an offset to data values e.g. like this:

            data_generator: |
             let offset = 123
              return entity.attributes.forecast.map((entry) => {
                return [new Date(entry.datetime), (entry.precipitation + offset)];
              });

This works fine, but for the offset I would like to use an entity, that has the needed value, for example in input_number defined elsewhere in Home Assistant.

Any ideas how to do that?

EDIT: I used today’s trivial solution and asked ChatGPT4o. Got working solution right away.

Why is my gradient fill 90 degrees rotated?

„stacked=true“ no longer works after update?

Yesterday I installed the latest update of ApexCharts and since then the bars of the bar chart are displayed side by side, no longer stacked. Cache has been cleared and also tested on different browsers.
Has anyone else had this experience?

3 Likes

I’m trying to figure it out. The way the library handles this has changed quite drastically and it might take some time to fix it (if I can fix it on my side)

2 Likes

I have another question. Maybe it was already like this before. Why doesn’t the Y-axis starts at 0? This causes the bars to visually slip into the negative range
IMG_3442

How do I remove the horizontal line in the line graph?
image

            - type: 'custom:apexcharts-card'
              apex_config:
                chart:
                  height: 500px
                yaxis:
                  - id: first
                    labels:
                      formatter: |
                        EVAL:function (val) {
                          return val.toFixed(0) + '€';
                        }
                    show: true
                    min: 0
              graph_span: 60d
              series:
              - entity: sensor.mysensor
                type: column
                name: Per dag
                unit: €
                show:
                  in_header: false
                  legend_value: false
                data_generator: |
                  return entity.attributes.costs.map((entry) => {
                     return [new Date(entry.readingDate), entry.total];
                   });
              - entity: sensor.mysensor
                type: line
                stroke_width: 2
                name: Gemiddeld
                unit: €
                show:
                  in_header: false
                  legend_value: false
                data_generator: |
                  return entity.attributes.costs.map((entry) => {
                     return [new Date(entry.readingDate), entry.average];
                   });

You can set the min value of the Y axis. You can see an example in my post above.

I have commented on another post earlier, likely the data is in reverse order and the horizontal line is connecting the dots

1 Like

Sorry if I missed it but what does the new statistics type “change” do?