jpawlowski/hass.tibber_prices
1
0
Fork 0
mirror of https://github.com/jpawlowski/hass.tibber_prices.git synced 2026-03-30 05:13:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(apexcharts): synchronize y-axis tick intervals for consistent grid alignment

Browse source 
Problem: When using dual y-axes (price + hidden highlight for best-price overlay),
ApexCharts calculates tick intervals independently for each axis. This caused
misaligned horizontal grid lines - the grid follows the first y-axis ticks,
but if the hidden highlight axis had different tick calculations, visual
inconsistencies appeared (especially visible without best-price highlight).

Solution:
- Set tickAmount: 4 on BOTH y-axes to force identical tick intervals
- Add forceNiceScale: true to ensure rounded tick values despite fixed min/max
- Add showAlways: true to price axis in template modes to prevent axis
  disappearing when toggling series via legend

Also add tooltip.shared: true to combine tooltips from all series at the
same x-value into a single tooltip, reducing visual clutter at data points.

Impact: Grid lines now align consistently regardless of which series are
visible. Y-axis remains stable when toggling series in legend.
This commit is contained in:
Julian Pawlowski 2025-12-21 17:39:12 +00:00
parent ada17f6d90
commit 941f903a9c
1 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
custom_components/tibber_prices/services/get_apexcharts_yaml.py
View file

@ -546,6 +546,7 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
},
"tooltip": {
"enabled": True,
"shared": True, # Combine tooltips from all series at same x-value
"enabledOnSeries": [1, 2, 3, 4, 5] if highlight_best_price else [0, 1, 2, 3, 4],
"marker": {
"show": False,
@ -566,6 +567,10 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
"max": 1,
"show": False, # Hide this axis (only for highlight overlay)
"opposite": True,
"apex_config": {
"forceNiceScale": True,
"tickAmount": 4,
},
},
],
"now": (
@ -694,6 +699,8 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
"title": {"text": price_unit},
"decimalsInFloat": 0 if use_subunit else 1,
"forceNiceScale": True,
"showAlways": True,
"tickAmount": 4,
},
}
@ -712,6 +719,8 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
"title": {"text": price_unit},
"decimalsInFloat": 0 if use_subunit else 1,
"forceNiceScale": True,
"showAlways": True,
"tickAmount": 4,
},
}
@ -742,6 +751,10 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
"max": 1,
"show": False,
"opposite": True,
"apex_config": {
"forceNiceScale": True,
"tickAmount": 4,
},
},
],
"apex_config": {
@ -851,6 +864,8 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
"title": {"text": price_unit},
"decimalsInFloat": 0 if use_subunit else 1,
"forceNiceScale": True,
"showAlways": True,
"tickAmount": 4,
},
}
@ -869,6 +884,8 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
"title": {"text": price_unit},
"decimalsInFloat": 0 if use_subunit else 1,
"forceNiceScale": True,
"showAlways": True,
"tickAmount": 4,
},
}
@ -901,6 +918,10 @@ async def handle_apexcharts_yaml(call: ServiceCall) -> dict[str, Any]: # noqa:
"max": 1,
"show": False,
"opposite": True,
"apex_config": {
"forceNiceScale": True,
"tickAmount": 4,
},
},
],
"apex_config": {