Hello everyone!
I’m currently been tired of an issue I have with apex charts on one of mine dashboards. It’s started already in November, after one of HA upgrades, I don’t remember which one. Maybe some of you guys had similar problem and solved it.
Here is the case.
I’m using two ApexCharts-cards to visualize future grid prices from Nordpool. There is identical setup on two different dashboards. One of them, is mostly standard HA cards, no issues there, charts showing correct.
The other dashboard I use on the built-in screen in Samsung Family Hub refrigerator. This screen and built in web browser is quite strange. It’s zooming everything on it to 200%. So, when I use regular dashboard on it, it’s showing enormous big cards and only one card in width.
Therefore I’m using frontend module lovelace-card-mod, to apply some visual changes (CSS Style) to cards and zoom it down by 50%. Cards are hold in place by vertical-stack and horizontal-stack card configuration.
Everything was fine, until some upgrades in November or start December 2022, I don’t really remember.
Now, when I open this resized dashboard, it looks like charts are resized 50% inside the already resized card. When I switch to other view on the dashboard and come back again to view witch charts, they looks right, like it suppose to be. When I refresh website or change dashboard, charts are smaller again. They also looks right when I resize browser window.
Here is a code of charts:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
card_mod: !include lovelace/cardmod1-50.yaml
graph_span: 26h
experimental:
color_threshold: true
header:
title: Prices next 24h (kr/kWh)
show: true
apex_config:
chart:
redrawOnWindowResize: true
yaxis:
min: 0
max: 10
hours_12: false
span:
start: hour
offset: "-2h"
now:
show: true
label: Nu
series:
- entity: sensor.import_power_price_incl_transport
type: column
float_precision: 2
data_generator: >
return (entity.attributes.raw_today.map((start, index) =>
{
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
})).concat(entity.attributes.raw_tomorrow.map((start,
index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
}));
color_threshold:
- value: 0
color: lightgreen
- value: 1
color: green
- value: 3
color: yellow
- value: 5
color: orange
- value: 7
color: red
- value: 9
color: darkred
- type: custom:apexcharts-card
card_mod: !include lovelace/cardmod1-50.yaml
graph_span: 26h
experimental:
color_threshold: true
header:
show: true
title: Grid Export next 24h (kr/kWh)
apex_config:
yaxis:
min: 0
max: 10
hours_12: false
span:
start: hour
offset: "-2h"
now:
show: true
label: Nu
series:
- entity: sensor.export_price_power
type: column
float_precision: 2
data_generator: |
return (entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
})).concat(entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
}));
color_threshold:
- value: 0
color: lightgreen
- value: 1
color: green
- value: 3
color: yellow
- value: 5
color: orange
- value: 7
color: red
- value: 9
color: darkred
Here is a code of cardmod1-50.yaml, which resizing cards by 50%
style:
.: |
#states > * {
margin: -1px 0px !important;
}
ha-card {
background: rgba(120, 200, 255, .1);
background-image: linear-gradient(to bottom, rgba(120,200,255,.1), rgba(120,200,255,0));
border: 1px solid rgba(120,200,255,.3);
font-variant: small-caps;
zoom: 0.5;
}
.card-header {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(120,200,255,.3);
color: rgba(120,200,255,.8);
}
.card-content {
padding-top: 8px;
padding-bottom: 8px;
}
When I just open dashboard (same issue on pc in Chrome, on refrigerator or HA app), it’s look like this:
When I switch between views in dashboard, it’s looks like it should be (and like it was before upgrade):
I looked in the console on web browser, there is no errors on loading, or nothing else indicating what is wrong. Somehow charts changed behavior to CSS styles and applies double on page loading but goes single again on change view…
Anyone has an idea how to fix this?
