fix: horizontal autoSkip ticks on line/area chart X axis - #310
Merged
Conversation
…follow-up) Line/area charts draw a Chart.js category scale with one tick per row; at a few hundred rows the default up-to-50° rotation was an unreadable wall of timestamps. Force maxRotation/minRotation:0 + autoSkip so Chart.js drops enough labels to stay horizontal instead. Bar/hbar/pie unaffected. A genuine Chart.js time scale (natural tick boundaries, gap-aware placement) is filed as a follow-up: #309. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Mf8cy6d2qWcbvuSzvtf7m4
5 tasks
8 tasks
BorisTyshkevich
added a commit
that referenced
this pull request
Jul 19, 2026
…time-role X (#312) * feat(#309): Chart.js time scale for line/area charts over a time-role X Line/area charts whose X column is time-role (`chartRole` = 'time') now draw a genuine Chart.js `scales.x.type: 'time'` instead of the category scale: ticks land on natural time boundaries and points sit at their real elapsed time, so gaps in irregularly-sampled data show as gaps instead of being compressed away. A new pure `chartTimeValue()` parses ClickHouse Date/DateTime/DateTime64 strings into epoch-ms (literal wall-clock digits, no timezone conversion, with a calendar round-trip check so an invalid-but- date-shaped value falls back rather than silently rolling over); any unparseable displayed category falls the whole axis back to the existing category scale. Bar/hbar/pie and non-time-role line/area charts are unaffected. Fifth bundled runtime dependency (CLAUDE.md rule 4): chartjs-adapter-date-fns (+ its date-fns peer), imported as a side-effect registration in main.ts next to chart.js/auto. Measured +11.6 KiB gzip / +9.7 KiB brotli. Fixes a tooltip regression the time-scale change would otherwise introduce: under the time scale, Chart.js's tooltip `context.raw` is the dataset's own `{x,y}` point object rather than a bare number, so an authored value format now extracts `.y` before formatting instead of formatting the point object itself (which would render every tooltip as "—"). Follow-up to #310 (the category-axis autoSkip mitigation). Filed #311 (inbox) for a narrower, out-of-scope DST-transition edge case in the new local wall-clock time parsing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GLMprUnwnz4oaz3cnLRKcz * feat(#309): extend the time scale to bar and hbar charts Per user follow-up feedback on the served PR build: the same real Chart.js time scale now applies to vertical bar/column and horizontal bar (hbar), not just line/area. hbar's category axis is Y (indexAxis:'y'), so its time-scale points carry the epoch in `y` and the value in `x` — the mirror of every other cartesian type. Pie stays excluded (no axis). Also tightens the defensive fallback: an empty result (zero displayed categories) no longer vacuously satisfies "every category parsed" and claims a time axis with nothing to plot. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GLMprUnwnz4oaz3cnLRKcz --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
categoryscale (one tick per row — no time scale yet), so at a few hundred rows the default rotation (up to 50°) produced an unreadable wall of rotated timestamp labels.chartJsConfig(src/core/chart-data.ts) now setsautoSkip: true, maxRotation: 0, minRotation: 0on the category (X) axis ticks for line/area charts only, so Chart.js drops enough labels to stay horizontal. Bar/hbar/pie category axes are unchanged.tests/unit/chart-data.test.tscoverage asserting the new tick options on line/area and their absence on bar/hbar.[Unreleased]entry added, cross-linking the follow-up.Filed #309 as a follow-up: a genuine Chart.js
timescale (natural tick boundaries, gap-aware point placement) for time-role X columns, since a category scale still evenly spaces irregularly-sampled timestamps even with this fix.Test plan
npm test— 145 test files / 3560 tests pass, 100% line/statement/function coverage onchart-data.tsmaintained (branches 97.51%, above the 90% floor)npm run check:types(tsc --noEmit) passesnpm run buildsucceeds🤖 Generated with Claude Code
https://claude.ai/code/session_01Mf8cy6d2qWcbvuSzvtf7m4