I also not just added it, you can see the GitHub commit was already from eight days ago 
@rvdbrink first thanks for you blog pages
To hide the value in the legend you can add the following:
all_series_config:
show:
legend_value: false
You must add this on the top, like below:
type: custom:apexcharts-card
now:
show: true
graph_span: 4d
all_series_config:
show:
legend_value: false
span:
start: day
series:
1 Like
@rvdbrink Iāve added that CC, and found I needed another attribute than the one given in the repo:
{% set pollen = state_attr('sensor.kleenex_pollen_radar_roosendaal_bomen','details') %} {% for tree in pollen %}
of course, I dont mean the roosendaal_bomen replacing the <location_trees> from the example, but the fact no attribute ācurrentā exists.
Also, please make that template according to guidelines, and use the state_attr() syntax, in stead of the states.<sensorx>.attributes.attribute syntax which is not safe in case errors.
Hi, tnx for the feedback.
I checked it in my Home Assistant and I canāt see the attribute structure correct but in the browser network inspector you can. This is how the attribute data looks for me:
You can see, for me, the
details property is a sub-property of current. Thatās why itās also in my example code.
I tried your pollen variable but the only version which works for me with the state_attr method is.
{% set pollen = state_attr('sensor.kleenex_pollen_radar_huis_trees','current').details %}
Iāll update the page at least with this change.
It sounds like your attribute data structure is different. Can you compare this?
sure, and as said, I have this:
{% set pollen = state_attr('sensor.kleenex_pollen_radar_roosendaal_bomen','details') %} {% for tree in pollen %}
or using states:
might be another nice addition, to list the forecasts:
{% for item in state_attr('sensor.kleenex_pollen_radar_roosendaal_bomen','forecast') %}
{{- item.date }} Value: {{ item.value }}, Level: {{ item.level }}
{% for detail in item.details %}
{{ detail.name }}: {{ detail.value }}:{{ detail.level }}
{% endfor %}
{% endfor %}
didnt give the markdown a thought yetā¦
I now see the code for your apexcharts doesnt work correctly either because of the fact there is no current.date. Only forecasts are shown:
so there is some work to do regarding the data generator
data_generator: >
let data = [];
if (entity.attributes.current) {
data.push([new Date(entity.attributes.current.date).getTime(), entity.attributes.current.details.find(t => t.name === "Hazelaar").value]);
}
return data.concat(entity.attributes.forecast.map(d => [new
Date(d.date).getTime(), d.details.find(t => t.name ===
"Hazelaar").value]));
given the if will never be true, it can be taken out completelyā¦
With your data the Ƭf isnāt working, for me it contains the data for today.
The data variable concatenate todays data with the forecast data and combine this as input for the graph.
Iām curious which data format in the attribute field other people have with this integration.
I read your blog and my goal is to get the Tile card with level indicators.
Card-Mod 3 (v3.4.4) is installed correctly. And I made three extra helper sensors via the frontend like you discriped.
I adjusted your code to below:
# Sourcecode by vdbrink.github.io
# Horizontal Stack Card Configuration
type: horizontal-stack
cards:
- entity: sensor.pollen_kruiden
name: Kruiden
type: tile
vertical: true
tap_action:
action: more-info
card_mod:
style: |
.icon-container {
{% set level = states('sensor.pollen_kruiden_concentratie') %}
{% set color = {'Geen','white','Laag':'green','Gemiddeld':'orange','Hoog':'darkorange','Zeer Hoog':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
{% set circle = {'Geen','0','Laag':'25','Gemiddeld':'50','Hoog':'75','Zeer Hoog':'100'} %}
{% set percentage = circle.get(level,'25') %}
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%,
var(--card-background-color) 0% 100%);
}
ha-tile-icon {
{% set level = states('sensor.pollen_kruiden_concentratie') %}
{% set color = {'Geen','white','Laag':'green','Gemiddeld':'orange', 'Hoog':'darkorange','Zeer Hoog':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
--tile-color: {{level_color}};
}
- entity: sensor.pollen_grassen
name: Grassen
type: tile
vertical: true
tap_action:
action: more-info
card_mod:
style: |
.icon-container {
{% set level = states('sensor.pollen_grassen_concentratie') %}
{% set color = {'Geen','white','Laag':'green','Gemiddeld':'orange','Hoog':'darkorange','Zeer Hoog':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
{% set circle = {'Geen','0','Laag':'25','Gemiddeld':'50','Hoog':'75','Zeer Hoog':'100'} %}
{% set percentage = circle.get(level,'25') %}
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%,
var(--card-background-color) 0% 100%)
}
ha-tile-icon {
{% set level = states('sensor.pollen_grassen_concentratie') %}
{% set color = {'Geen','white','Laag':'green','Gemiddeld':'orange','Hoog':'darkorange','Zeer Hoog':'maroon'} %}
{% set level_color = color.get(level,'gray') %};
--tile-color: {{level_color}};
}
- entity: sensor.pollen_bomen
name: Bomen
type: tile
vertical: true
tap_action:
action: more-info
card_mod:
style: |
.icon-container {
{% set level = states('sensor.pollen_bomen_concentratie') %}
{% set color = {'Geen','white','Laag':'green','Gemiddeld':'orange','Hoog':'darkorange','Zeer Hoog':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
{% set circle = {'Geen','0','Laag':'25','Gemiddeld':'50','Hoog':'75','Zeer Hoog':'100'} %}
{% set percentage = circle.get(level,'25') %}
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%,
var(--card-background-color) 0% 100%);
}
ha-tile-icon {
{% set level = states('sensor.pollen_bomen_concentratie') %}
{% set color = {'Geen','white','Laag':'green','Gemiddeld':'orange', 'Hoog':'darkorange','Zeer Hoog':'maroon'} %}
{% set level_color = color.get(level,'gray') %};
--tile-color: {{level_color}};
}
The output is not what i expected.
What am I doing wrong here?
Hi @Robbi-Ho ,
I just see in release 1.1.3 the data structure is changed. The manual is based on the old structure. Iām working on it to update the manual according the latest release.
I let you know when Iām done with it.
@Mariusthvdb since integration release 1.1.3 the data structure is changed which explains the difference in data structure! Iāll update the blog description.
1 Like
yes that explains it
seems I was ahead of your blog when I downloaded the CC for the first time.
My regular card doesnt use the CC, but a direct call to scrape the website wasnt affected because of that (even though scraping is a terribly unreliable technique, it still works for this one. Doesnt give the list of detailed types though, only grass, weeds, trees)
1 Like
Iām using this:
Itās based on the custom button card, so it gives a bit more freedom in the design and size of the card. I use the ālevelā sensor of the kleenex pollen radar that shows low, moderate, high and very high.
type: custom:button-card
entity: sensor.kleenex_pollen_radar_home_weeds_level
name: Onkruid
show_name: true
show_state: true
show_icon: true
styles:
card:
- background: none
name:
- color: black
- font-weight: 800
- font-size: 2em
state:
- color: grey
- font-weight: 500
- font-size: 1.5em
state:
- value: low
color: "#4CAF50"
- value: moderate
color: "#FCD34D"
- value: high
color: "#F4A261"
- value: very_high
color: "#F87171"
1 Like
After a lot of reading, trying, @rvdbrinkās blog, ChatGPT, more trying I finally got to this for todayās forecast;
I used a a horizontal-stack-card together with 3 custom:mushroom-template-cards and the following code:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.pollen_bomen
layout: vertical
primary: >
{% set forecast = state_attr(entity, 'level') %} {% set niveau = {
'none': 'Geen',
'low': 'Laag',
'moderate': 'Gemiddeld',
'high': 'Hoog',
'very high': 'Zeer hoog'
} %}
{% set level_niveau = niveau.get(forecast, 'Onbekend') %} Bomen: {{
level_niveau }}
secondary: "{{ states(entity) }} ppm"
icon: mdi:tree
icon_color: |
{% set forecast = state_attr(entity, 'level') %} {% set colors = {
'none': 'white',
'low': 'green',
'moderate': 'orange',
'high': 'darkorange',
'very high': 'maroon'
} %}
{% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 25px;
--icon-size: 48px;
{% set forecast = state_attr('sensor.pollen_bomen', 'level') %}
{% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very high': '100'} %}
{% set percentage = circles.get(forecast, '10') %}
{% set colors = {'none': 'white', 'low': 'green', 'moderate': 'orange', 'high': 'darkorange', 'very high': 'maroon'} %}
{% set level_color = colors.get(forecast, 'gray') %}
background:
radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
}
- type: custom:mushroom-template-card
entity: sensor.pollen_grassen
layout: vertical
primary: >
{% set forecast = state_attr(entity, 'level') %} {% set niveau = {
'none': 'Geen',
'low': 'Laag',
'moderate': 'Gemiddeld',
'high': 'Hoog',
'very high': 'Zeer hoog'
} %}
{% set level_niveau = niveau.get(forecast, 'Onbekend') %} Grassen: {{
level_niveau }}
secondary: "{{ states(entity) }} ppm"
icon: mdi:grass
icon_color: |
{% set forecast = state_attr(entity, 'level') %} {% set colors = {
'none': 'white',
'low': 'green',
'moderate': 'orange',
'high': 'darkorange',
'very high': 'maroon'
} %}
{% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 25px;
--icon-size: 48px;
{% set forecast = state_attr('sensor.pollen_grassen', 'level') %}
{% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very high': '100'} %}
{% set percentage = circles.get(forecast, '10') %}
{% set colors = {'none': 'white', 'low': 'green', 'moderate': 'orange', 'high': 'darkorange', 'very high': 'maroon'} %}
{% set level_color = colors.get(forecast, 'gray') %}
background:
radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
}
- type: custom:mushroom-template-card
entity: sensor.pollen_kruiden
layout: vertical
primary: >
{% set forecast = state_attr(entity, 'level') %} {% set niveau = {
'none': 'Geen',
'low': 'Laag',
'moderate': 'Gemiddeld',
'high': 'Hoog',
'very high': 'Zeer hoog'
} %}
{% set level_niveau = niveau.get(forecast, 'Onbekend') %} Kruiden: {{
level_niveau }}
secondary: "{{ states(entity) }} ppm"
icon: mdi:flower-pollen
icon_color: |
{% set forecast = state_attr(entity, 'level') %} {% set colors = {
'none': 'white',
'low': 'green',
'moderate': 'orange',
'high': 'darkorange',
'very high': 'maroon'
} %}
{% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 25px;
--icon-size: 48px;
{% set forecast = state_attr('sensor.pollen_kruiden', 'level') %}
{% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very high': '100'} %}
{% set percentage = circles.get(forecast, '10') %}
{% set colors = {'none': 'white', 'low': 'green', 'moderate': 'orange', 'high': 'darkorange', 'very high': 'maroon'} %}
{% set level_color = colors.get(forecast, 'gray') %}
background:
radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
}
And I also managed to get the cards for next dayās forecast;
With this code:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.pollen_bomen
layout: vertical
primary: >
{% set forecast = state_attr(entity, 'forecast')[0]['level'] %} {% set
niveau = {
'none': 'Geen',
'low': 'Laag',
'moderate': 'Gemiddeld',
'high': 'Hoog',
'very high': 'Zeer hoog'
} %}
{% set level_niveau = niveau.get(forecast, 'Onbekend') %} Bomen: {{
level_niveau }}
secondary: "{{ state_attr(entity, 'forecast')[0]['value'] }} ppm"
icon: mdi:tree
icon_color: >
{% set forecast = state_attr(entity, 'forecast')[0]['level'] %} {% set
colors = {
'none': 'white',
'low': 'green',
'moderate': 'orange',
'high': 'darkorange',
'very high': 'maroon'
} %}
{% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 25px;
--icon-size: 48px;
{% set forecast = state_attr('sensor.pollen_bomen', 'forecast')[0]['level'] %}
{% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very high': '100'} %}
{% set percentage = circles.get(forecast, '10') %}
{% set colors = {'none': 'white', 'low': 'green', 'moderate': 'orange', 'high': 'darkorange', 'very high': 'maroon'} %}
{% set level_color = colors.get(forecast, 'gray') %}
background:
radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
}
- type: custom:mushroom-template-card
entity: sensor.pollen_grassen
layout: vertical
primary: >
{% set forecast = state_attr(entity, 'forecast')[0]['level'] %} {% set
niveau = {
'none': 'Geen',
'low': 'Laag',
'moderate': 'Gemiddeld',
'high': 'Hoog',
'very high': 'Zeer hoog'
} %}
{% set level_niveau = niveau.get(forecast, 'Onbekend') %} Grassen: {{
level_niveau }}
secondary: "{{ state_attr(entity, 'forecast')[0]['value'] }} ppm"
icon: mdi:grass
icon_color: >
{% set forecast = state_attr(entity, 'forecast')[0]['level'] %} {% set
colors = {
'none': 'white',
'low': 'green',
'moderate': 'orange',
'high': 'darkorange',
'very high': 'maroon'
} %}
{% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 25px;
--icon-size: 48px;
{% set forecast = state_attr('sensor.pollen_grassen', 'forecast')[0]['level'] %}
{% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very high': '100'} %}
{% set percentage = circles.get(forecast, '10') %}
{% set colors = {'none': 'white', 'low': 'green', 'moderate': 'orange', 'high': 'darkorange', 'very high': 'maroon'} %}
{% set level_color = colors.get(forecast, 'gray') %}
background:
radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
}
- type: custom:mushroom-template-card
entity: sensor.pollen_kruiden
layout: vertical
primary: >
{% set forecast = state_attr(entity, 'forecast')[0]['level'] %} {% set
niveau = {
'none': 'Geen',
'low': 'Laag',
'moderate': 'Gemiddeld',
'high': 'Hoog',
'very high': 'Zeer hoog'
} %}
{% set level_niveau = niveau.get(forecast, 'Onbekend') %} Kruiden: {{
level_niveau }}
secondary: "{{ state_attr(entity, 'forecast')[0]['value'] }} ppm"
icon: mdi:flower-pollen
icon_color: >
{% set forecast = state_attr(entity, 'forecast')[0]['level'] %} {% set
colors = {
'none': 'white',
'low': 'green',
'moderate': 'orange',
'high': 'darkorange',
'very high': 'maroon'
} %}
{% set level_color = colors.get(forecast, 'gray') %} {{ level_color }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 25px;
--icon-size: 48px;
{% set forecast = state_attr('sensor.pollen_kruiden', 'forecast')[0]['level'] %}
{% set circles = {'low': '25', 'moderate': '50', 'high': '75', 'very high': '100'} %}
{% set percentage = circles.get(forecast, '10') %}
{% set colors = {'none': 'white', 'low': 'green', 'moderate': 'orange', 'high': 'darkorange', 'very high': 'maroon'} %}
{% set level_color = colors.get(forecast, 'gray') %}
background:
radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{percentage}}% 0%, var(--card-background-color) 0% 100%);
}
1 Like
Today, I updated all the presentations YAML and screenshots on my blog.
Since they were broken due to updates in the integration and Home Assistant. Now the description is compatible with Home Assistant version 2025.3.4 and Kleenex integration version 1.1.7
Unfortunately the colored background couldnāt be fixed.
meanwhile running HA 2025.5, and ive lost my gradient border one the icon containerā¦
seems the dom changed for those, and Ive not found them back
anyone?
apparently it moved to:
card_mod:
style:
ha-tile-icon $: |
.container
changing the specific for those to:
card_mod:
style:
ha-tile-icon $: |
{% set level = states(config.entity + '_concentratie') %}
{% set color =
{'Laag':'var(--success-color)','Gemiddeld':'var(--warning-color)',
'Hoog':'darkorange','Zeer Hoog':'var(--alert-color)'} %}
{% set level_color = color.get(level,'gray') %}
.container {
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
.: |
{% set level = states(config.entity + '_concentratie') %}
{% set color =
{'Laag':'var(--success-color)','Gemiddeld':'var(--warning-color)',
'Hoog':'darkorange','Zeer Hoog':'var(--alert-color)'} %}
{% set level_color = color.get(level,'gray') %}
ha-card {
background: rgba( 87,161,165 , 0.5);
--primary-text-color: var(--primary-color);
}
ha-tile-icon {
--tile-color: {{level_color}};
}
not yet perfect, but the element seems the correct one now
