ApexCharts card - A highly customizable graph card

Share your Projects! Dashboards & Frontend
3448

Can I change the colour of the chart line above and below 0 ?

          series:
            - entity: sensor.p1_meter_5c2faf04a1f2_actueel_vermogen
              name: Actueel Verbruik
              float_precision: 1
              extend_to: now 
              color: >
                [[[ 
                  let state =  states['sensor.p1_meter_5c2faf04a1f2_actueel_vermogen'].state
                  if(parseFloat(state) > 0 ){
                    return 'rgb(153,50,204)' }
                  return 'rgb(102, 204, 0)'
                ]]]

i tried this, but this is not working

3449

Thanks! Can you share your code

3450

Hello
This could be what you need??

apex_config:
  dataLabels:
    enabled: false

With Labels

1000033597
10000335971080×611 37.6 KB

Without

1000033598
10000335981080×656 28.7 KB

Best regards

3451

Hi, would you be able to share the code that gave you this display ?
Thx in advance

3452

Hi sure … here you go :slight_smile:

Code 
type: custom:apexcharts-card
experimental:
  color_threshold: true
header:
  show: true
  title: Power
  standard_format: true
  show_states: true
  colorize_states: false
update_interval: 1min
apex_config:
  chart:
    height: 350px
    zoom:
      type: x
      enabled: true
      autoScaleYaxis: false
    toolbar:
      show: true
      autoSelected: zoom
      tools:
        pan: true
    xaxis.type: datetime
  tooltip:
    enabled: true
    shared: true
    followCursor: true
  fill:
    type: gradient
    gradient:
      type: vertical
      shade: dark
      shadeIntensity: 0.2
      inverseColors: true
      opacityFrom: 0.9
      opacityTo: 0.2
      stops:
        - 0
graph_span: 24h
now:
  show: true
  label: Now
  color: rgb(68,115,158)
span:
  start: day
all_series_config:
  type: area
  opacity: 0.3
  stroke_width: 1.2
  show:
    legend_value: false
  color_threshold:
    - value: -3
      opacity: 0.9
    - value: 0
      opacity: 0.2
    - value: 3
      opacity: 0.9
series:
  - entity: sensor.actuele_opbrengst_zonnepanelen_kw
    name: Zonnepanelen
    float_precision: 3
    statistics:
      type: mean
      period: 5minute
      align: middle
    color: orange
    unit: kW
    extend_to: now
    show:
      legend_value: false
      in_header: false
  - entity: sensor.power_consumption
    name: Afname
    color: rgb(95,3,242)
    float_precision: 3
    statistics:
      type: mean
      period: 5minute
      align: middle
    unit: kW
    extend_to: now
    show:
      legend_value: false
      in_header: false
  - entity: sensor.power_production
    name: Injectie
    invert: true
    color: rgb(28,226,34)
    float_precision: 3
    statistics:
      type: mean
      period: 5minute
      align: middle
    unit: kW
    extend_to: now
    show:
      legend_value: false
      in_header: false
3454

might have missed it in the thread, but did you already update this card after the demise of the forecast attribute, and change to the ‘get_forecasts’ trigger template?

if you make a trigger template:

template:

  - trigger:
      - platform: state
        entity_id: sensor.date
#       - platform: event
#         event_type: event_template_reloaded
#       - platform: homeassistant
#         event: start
    action:
      - service: weather.get_forecasts
        target:
          entity_id: weather.buienradar
        data:
          type: daily
        response_variable: buienradar_forecast
    sensor:
      - unique_id: buienradar_forecast_complete
        state: >
          {{now()}}
        attributes:
          forecast: >
            {{buienradar_forecast['weather.buienradar'].forecast}}

# the above suffices. below attributes are just to break out the indivual forecasts..
          forecast_0: >
            {{buienradar_forecast['weather.buienradar'].forecast[0]}}
          forecast_1: >
            {{buienradar_forecast['weather.buienradar'].forecast[1]}}
          forecast_2: >
            {{buienradar_forecast['weather.buienradar'].forecast[2]}}
          forecast_3: >
            {{buienradar_forecast['weather.buienradar'].forecast[3]}}
          forecast_4: >
            {{buienradar_forecast['weather.buienradar'].forecast[4]}}

and then replace the weather entity in your card with the trigger based template sensor entity_id:

  - entity: sensor.buienradar_forecast_complete
    name: max.
    yaxis_id: temp
    unit: °C
    type: line
    color: '#FFBF00'
    data_generator: |
      return entity.attributes.forecast.map((entry) =>
      {
        var date = new Date(entry.datetime);

        return [date, entry.temperature];
      });

it works just like before.

2 Likes
3455

Well, i ditch the ApexChart for The Weather, thou still use it for i.e energy prices/consumption, i even abandoned the top-banner:card., and the multi-entities for temperatures inside.

I replaced those( and alot more ) with Custom:button-card, and expander-cards (Hiding most graphs and Cams etc) So they first “load” if i need to see them
, trying to get as much as i can in my “Overview” page, without jeopardized the “security”
Thou i actually already feel it’s becoming to “Cluttered”

03.04.2024_11.40.20_REC
03.04.2024_11.40.20_REC453×644 22.3 KB

However i will try your template-sensor, as i currently have 2x5 individual template-sensors
Thou my weather: button-cards uses the same “weather” button-template in the View

2 Likes
3456

Hello,

I have a small problem with the display of the ApexChart card. Despite an intensive search
online, I didn’t find anything about this. Since I only have limited space for the card,
I would like to utilize the unused space under the title. (marked in the picture)
I can save space with header/floating: true, but then header/title_actions isn‘t working anymore.
Since i want to use title_action, this is not an option for me and I’m looking for another solution.
Can anyone help me with this or has someone an idea on how to solve this?

Thank you in advance.

Chart Test
Chart Test741×347 42.2 KB

              - type: custom:apexcharts-card
                graph_span: 1 day
                update_interval: 15sec
                header:
                  show: true
                  title: Temperaturentwicklung
                  title_actions:
                    tap_action:
                      entity: sensor.broadlink_1_temperatur
                      action: more-info
                  show_states: false
                  standard_format: false
                  colorize_states: true
                  floating: false
                apex_config:
                  chart:
                    height: 120px
                    offsetY: 10
                    parentHeightOffset: 12
                  tooltip:
                    enabled: false
                  xaxis:
                    labels:
                      style:
                        fontSize: 8px
                        fontWeight: 900
                yaxis:
                  - id: left
                    decimals: 0
                    apex_config:
                      tickAmount: 4
                      labels:
                        style:
                          fontSize: 8px
                          fontWeight: 900
                series:
                  - entity: sensor.broadlink_1_temperatur
                    stroke_width: 1
                    group_by:
                      func: avg
                      duration: 1min
                card_mod:
                  style: |
                    ha-card {
                      font-size: 8px;
                      text-align: center
                    }
                    div#header__title {
                      font-size: 10px;
                      font-weight: 900;
                    }
                    #state__name, #state  {
                      font-size: 8px !important;
                    }
3457

hello sorry i cant help you with the question but i would like to have the code you are using pleaseeeeeeeeeeeee

thanks

3459

Hi, my actual variant

- type: custom:apexcharts-card
    header:
      show: true
      show_states: true
      colorize_states: true
    experimental:
      color_threshold: true
    series:
      - entity: sensor.your_temperature_sensor
        type: line
        stroke_width: 3
        color_threshold:
          - value: 20
            color: cyan
          - value: 30
            color: yellow
          - value: 100
            color: red
        extend_to: now    
        show:
          header_color_threshold: true
    # yaxis:
    #   - min: 20
    span:
      offset: +1min
    apex_config:
      tooltip:
        followCursor: true
        x:
          show: false
    #   markers:
    #     size: 1
      xaxis:
        tooltip:
          enabled: true
      grid:
        show: false
    graph_span: 1h
    now:
      show: true
#      label: now
      color: red
    show:
      last_updated: true
      loading: true
3460

thanks man but nor working :cry:
any ideas ??

image
image945×808 83.7 KB

im just remplacing your sensor with mine

3461

i have this one wich is working just fine

image
image954×728 37.1 KB

''type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
title: Temperature Exterieur
show_states: true
series:

  • entity: sensor.exterieur
    type: area
    name: E
    color_threshold:
    • value: 0
      color: 013DFF
      opacity: 1
    • value: 10
      color: ‘#0D0DFF’
    • value: 17
      color: ‘#0D97FF’
    • value: 20
      color: ‘#FF8101’
    • value: 25
      color: ‘#FF0101’
      stroke_width: 1
      opacity: 0.4’’
3462

try to delete spaces and ‘-’ symbol

image
image601×502 67.4 KB

1 Like
3463

thanks i made some changes, it is not bad now

thanks again

image

3464

that works
:joy::+1:

3466

my example was for yaml file. In case gui mode use that

type: custom:apexcharts-card
header:
  show: true
  show_states: true
  colorize_states: true
experimental:
  color_threshold: true
series:
  - entity: sensor.your_sensor
    type: line
    stroke_width: 3
    color_threshold:
      - value: 20
        color: cyan
      - value: 30
        color: yellow
      - value: 100
        color: red
    extend_to: now
    show:
      header_color_threshold: true
span:
  offset: +1min
apex_config:
  tooltip:
    followCursor: true
    x:
      show: false
  xaxis:
    tooltip:
      enabled: true
  grid:
    show: false
graph_span: 1h
now:
  show: true
  label: now
  color: red
show:
  last_updated: true
  loading: true
3467

@RomRider love your work :grinning:

Just wondering whether you still maintain a backlog feature/wishlist? I know you’ve done this in the past. Adding Home Assistant local / server timezone support would be great as there seems to be plenty of interest in it.

Here is an example of the problem using the Sun2 integration. This apexchart is viewed locally, in the same timezone as the Home Assistant server. The sunrise is shown correctly
Local_View

Here is the same apexchart, viewed at the same time but from a different timezone from the Home Assistant server. You will not the sunrise is not shown correctly as the client time is used, rather than the server time.
Remote_View

3468

How to change font size?

2024-04-04_12-47-15

  - type: custom:apexcharts-card
    chart_type: donut
    update_interval: 60s
    apex_config:
      legend:
        show: false
      dataLabels:
        formatter: |
          EVAL:function(value) {
            return value.toFixed(1) + "%";
          }            
      plotOptions:
        pie:
          donut:
            size: 50%
            labels:
              show: true
              total:
                show: true
                label: Total Power
                formatter: |
                  EVAL:function(w) {
                    return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(2) + " W"
                    }
3469

I’m trying to get my pie chart to show me the current used Wattage followed by the entity name.

type: custom:apexcharts-card
chart_type: pie
series:
  - entity: sensor.stopcontact_wasmachine_huidig_gebruik
    name: Aquarium
  - entity: sensor.stopcontact_droogkast_huidig_gebruik
    name: Droogkast
apex_config:
  chart:
    height: 300px
  legend:
    show: false
  dataLabels:
    enabled: true
    style:
      fontSize: 9px

image

I’ve tried for instance this code but I only get the percentage (followed by the requested ‘W’):

formatter: |
      EVAL:function (val) {
        return val.toFixed(0) + " W";
      }

image

Does anyone here know how I can fix this?

3470

Try:

type: custom:apexcharts-card
chart_type: pie
series:
  - entity: sensor.stopcontact_wasmachine_huidig_gebruik
    name: Aquarium
    show:
      datalabels: percent
  - entity: sensor.stopcontact_droogkast_huidig_gebruik
    name: Droogkast
    show:
      datalabels: percent
apex_config:
  chart:
    height: 300px
  legend:
    show: false
  dataLabels:
    enabled: true
    style:
      fontSize: 9px