feat(chartjs): add Lollipop Chart template#59
Open
zl190 wants to merge 1 commit into
Open
Conversation
Port the Lollipop template to the Chart.js backend, mirroring the ECharts implementation: a thin bar dataset as the stem (barThickness 1.5, black, same as the ECharts stem) plus a point-only line dataset as the dot, on the shared category scale. Supports horizontal transposition (indexAxis y), color grouping with one dot dataset per group, and the dotSize property on the same 6-16px visual scale as ECharts. The stem dataset is filtered out of legend and tooltip. - register in cjsTemplateDefs (Bar group, same position as ECharts) - tests: 8 cases (registry, stem/dot shape, zero baseline, transpose, color groups, legend/tooltip filters, dotSize mapping, 3-backend parity) - docs: regenerate reference-chartjs.md (npm run gen:reference); add Lollipop to the SKILL.md Chart.js coverage list (+ synced asset) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This was referenced Jul 18, 2026
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.
What
The Vega-Lite and ECharts backends ship a Lollipop template; Chart.js doesn't, so the same
ChartAssemblyInputcompiles on two backends and throws on the third:This PR ports the template to the Chart.js backend, mirroring the ECharts implementation.
Implementation
Chart.js has no rule mark, so the stem is a
bardataset withbarThickness: 1.5(black, same as the ECharts stem) and the dot is a point-onlylinedataset (showLine: false) on the shared category scale. (Ascatterdataset would require numeric{x, y}points instead of category labels.)indexAxis: 'y'when the category is onydotSizeproperty on the same 6–16px visual scale as the ECharts templateBargroup, same position as EChartsOne behavior is mirrored deliberately: with a
colorgrouping, the stem length is the per-category sum while dots sit at individual group values — this matches the ECharts template (verified: same input gives stem data[288, 298, 297]on both backends). If that's worth changing, it applies to both backends — happy to file it separately.Verification
tests/lollipop-chartjs.test.ts— 8 cases: registry, stem/dot shape, zero baseline, transposition, color groups, legend/tooltip filters,dotSizemapping, 3-backend paritydocs/reference-chartjs.mdregenerated vianpm run gen:reference(21 chart types)server.test.ts)Side-by-side render vs Vega-Lite and ECharts (same input), plus the horizontal + grouped variant:
Note: #58 also touches SKILL.md (a different section); whichever lands second may need a trivial re-sync of the bundled asset.
🤖 Generated with Claude Code