From ca35f06770cc9b21e461a613857f132cf35bbad6 Mon Sep 17 00:00:00 2001 From: "F.N. Claessen" Date: Wed, 5 Aug 2026 17:53:04 +0200 Subject: [PATCH 1/4] fix(ui): stop drawing y-axis ticks between the labelled values The ECharts y-axis asked for minor ticks to get the finer gridlines between the major value lines. Those minor ticks are drawn on the axis itself, halfway between the labelled values (e.g. at 25 and 75 for labels at 0, 50 and 100), which reads as if the ticks and labels were misaligned. Hiding the minor ticks keeps the minor gridlines, which follow minorTick.splitNumber whether or not the ticks themselves are shown. Signed-off-by: F.N. Claessen --- flexmeasures/ui/static/js/fast-chart.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/flexmeasures/ui/static/js/fast-chart.js b/flexmeasures/ui/static/js/fast-chart.js index 734a83e2d3..ce31d7b6fe 100644 --- a/flexmeasures/ui/static/js/fast-chart.js +++ b/flexmeasures/ui/static/js/fast-chart.js @@ -1304,7 +1304,11 @@ function buildLineBarOption(elementId, groups, opts) { ...yAxisDomainOptions(group), // issue #2244 y-axis modes (zero / data / floor / strict) splitLine: { show: true, lineStyle: { opacity: 0.7 } }, // Finer gridlines between the major value lines, as in Vega-Lite. - minorTick: { show: true, splitNumber: 2 }, + // Only the gridlines: showing the minor ticks, too, would put tick marks + // halfway between the labelled values (e.g. at 25 and 75 for labels at 0, + // 50 and 100), which reads as if the labels were misaligned. + // minorSplitLine still follows minorTick.splitNumber when the ticks are hidden. + minorTick: { show: false, splitNumber: 2 }, minorSplitLine: { show: true, lineStyle: { color: "#e0e0e0", width: 1 } }, }); // Match Vega-Lite (chart_for_multiple_sensors): use linear interpolation for From ffc13a3ccffdf9da3e72d1a6091ef29a34c532eb Mon Sep 17 00:00:00 2001 From: "F.N. Claessen" Date: Wed, 5 Aug 2026 18:09:27 +0200 Subject: [PATCH 2/4] docs: note the y-axis tick fix on the ECharts entry Context: - The stray minor ticks came with the ECharts charts of #2234, which is still unreleased, so the fix belongs on that entry rather than a new one Change: - Appended PR #2399 to the changelog entry of PR #2234 Signed-off-by: F.N. Claessen --- documentation/changelog.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/changelog.rst b/documentation/changelog.rst index a734982fe4..69f6fb6c60 100644 --- a/documentation/changelog.rst +++ b/documentation/changelog.rst @@ -24,7 +24,7 @@ New features * The flex-context editor now also shows the fields that scheduling the asset would inherit from parent assets — uneditable, with buttons to jump to the editor of the defining parent asset or to override the field on the asset itself [see `PR #2346 `_] * Show asset annotations in asset charts: a lightly shaded time band across all subcharts, darkening with a tooltip (showing the annotation text and source) when hovered in a subchart; alerts get a warning hue, and instant annotations render as a vertical rule with a top marker; also adds a ``GET /api/v3_0/assets//chart_annotations`` endpoint [see `PR #2312 `_] * Floor off-clock API datetimes to a non-instantaneous sensor's resolution by default when ingesting sensor data, uploading sensor data, and handling scheduler flex-model timed events; configurable with the ``floor_datetimes_to_resolution`` sensor attribute [see `PR #2146 `_ and `PR #2194 `_] -* In the UI, asset and sensor charts now render with Apache ECharts (canvas) by default, for much faster drawing and interaction on dense time series, while staying visually and functionally equivalent to the previous Vega-Lite charts, which remain available as a fallback via a toggle [see `PR #2234 `_] +* In the UI, asset and sensor charts now render with Apache ECharts (canvas) by default, for much faster drawing and interaction on dense time series, while staying visually and functionally equivalent to the previous Vega-Lite charts, which remain available as a fallback via a toggle [see `PR #2234 `_ and `PR #2399 `_] * Breaking behaviour change: the top-level flex-context's ``relax-constraints`` field now defaults to ``True`` (matching the default already used within each ``commodities`` entry), so constraint violations are softly penalized by default instead of being hard constraints, unless explicitly set to ``False`` [see `PR #2172 `_] * Support for creating new assets by using another asset as a template from the UI. [see `PR #2195 `_ and `PR #2268 `_ * In the UI, asset and sensor lists can be filtered by ID prefix through API-backed search fields [see `PR #2231 `_] From cf5b049e79a314c9aeab2b38173bb75fa1834abe Mon Sep 17 00:00:00 2001 From: Ahmad-Wahid Date: Thu, 6 Aug 2026 13:50:54 +0200 Subject: [PATCH 3/4] fix(ui): show y-axis ticks next to the labelled values The ECharts y-axis never set axisTick, so it fell back to the "auto" default, which resolves to hidden for a value axis whose partner axis is a time axis. The labelled values ended up floating next to the grid without a tick mark, unlike in the Vega-Lite charts. Showing the major ticks puts one mark per label. The minor ticks stay hidden, so nothing is drawn halfway between the labels. Co-Authored-By: Claude Opus 5 --- flexmeasures/ui/static/js/fast-chart.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/flexmeasures/ui/static/js/fast-chart.js b/flexmeasures/ui/static/js/fast-chart.js index ce31d7b6fe..a7b83f71b4 100644 --- a/flexmeasures/ui/static/js/fast-chart.js +++ b/flexmeasures/ui/static/js/fast-chart.js @@ -1303,6 +1303,10 @@ function buildLineBarOption(elementId, groups, opts) { axisLabel: { fontSize: FONT_SIZE, color: "#222" }, ...yAxisDomainOptions(group), // issue #2244 y-axis modes (zero / data / floor / strict) splitLine: { show: true, lineStyle: { opacity: 0.7 } }, + // A tick mark next to each labelled value, as in Vega-Lite. ECharts would + // otherwise hide them ("auto" resolves to hidden for a value axis whose + // other axis is a time axis), leaving the labels floating next to the grid. + axisTick: { show: true, lineStyle: { color: "#888" } }, // Finer gridlines between the major value lines, as in Vega-Lite. // Only the gridlines: showing the minor ticks, too, would put tick marks // halfway between the labelled values (e.g. at 25 and 75 for labels at 0, From e02573037faf4a335bda02de83f847a79b3f9f81 Mon Sep 17 00:00:00 2001 From: "F.N. Claessen" Date: Thu, 6 Aug 2026 13:55:14 +0200 Subject: [PATCH 4/4] ui: give every labelled value a tick instead of hiding the minor ones Context: - Review of the first attempt: hiding the minor ticks left the y-axis without any ticks at all. The major ticks were never drawn: a value axis defaults to axisTick.show 'auto', which resolves to false next to a time axis, so the minor ticks halfway between the labels were the only ones there Change: - Show the axis ticks explicitly, so each labelled value has one, and restore the minor ticks (shorter) between them Signed-off-by: F.N. Claessen --- flexmeasures/ui/static/js/fast-chart.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/flexmeasures/ui/static/js/fast-chart.js b/flexmeasures/ui/static/js/fast-chart.js index ce31d7b6fe..5b570e107f 100644 --- a/flexmeasures/ui/static/js/fast-chart.js +++ b/flexmeasures/ui/static/js/fast-chart.js @@ -1303,12 +1303,14 @@ function buildLineBarOption(elementId, groups, opts) { axisLabel: { fontSize: FONT_SIZE, color: "#222" }, ...yAxisDomainOptions(group), // issue #2244 y-axis modes (zero / data / floor / strict) splitLine: { show: true, lineStyle: { opacity: 0.7 } }, - // Finer gridlines between the major value lines, as in Vega-Lite. - // Only the gridlines: showing the minor ticks, too, would put tick marks - // halfway between the labelled values (e.g. at 25 and 75 for labels at 0, - // 50 and 100), which reads as if the labels were misaligned. - // minorSplitLine still follows minorTick.splitNumber when the ticks are hidden. - minorTick: { show: false, splitNumber: 2 }, + // Tick marks at the labelled values. A value axis defaults to axisTick.show + // "auto", which resolves to false next to a time axis — so without this, the + // minor ticks below were the only ones drawn, halfway between the labelled + // values (e.g. at 25 and 75 for labels at 0, 50 and 100). + axisTick: { show: true }, + // Finer gridlines between the major value lines, as in Vega-Lite, with shorter + // tick marks to match. + minorTick: { show: true, splitNumber: 2 }, minorSplitLine: { show: true, lineStyle: { color: "#e0e0e0", width: 1 } }, }); // Match Vega-Lite (chart_for_multiple_sensors): use linear interpolation for