Skip to content

Add PictorialBar chart support#104

Merged
PeiyangYu merged 2 commits into
masterfrom
feat/pictorial-bar-series
May 14, 2026
Merged

Add PictorialBar chart support#104
PeiyangYu merged 2 commits into
masterfrom
feat/pictorial-bar-series

Conversation

@PeiyangYu

@PeiyangYu PeiyangYu commented May 10, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds the pictorialBar series — a bar chart that uses repeated symbols (pictograms) instead of solid rectangles. Standard pick for infographic-style dashboards: icon stacks, progress pictograms, etc.
  • Mirrors the existing Bar structure (same CartesianCoordChart base, same BaseBarSeriesOption mixin), and reuses BarItemStyleOption / BarLabelOption since pictorialBar shares those semantics.
  • Adds the pictogram-specific symbol fields, with the standard Number/String/Boolean overload pattern. Same fields are also available per-data-item.

Public API added

  • PictorialBar
  • charts.pictorialBar.PictorialBarSeries, PictorialBarDataItem, PictorialBarEmphasis
  • origin.chart.pictorialBar.PictorialBarSeriesOption, PictorialBarStateOption, PictorialBarEmphasisOption, PictorialBarDataItemOption

Pictogram-specific fields

symbol (preset name or path:// SVG), symbolSize, symbolPosition (start / center / end), symbolOffset, symbolRotate, symbolRepeat (Boolean / Number / String fixed), symbolRepeatDirection, symbolMargin, symbolClip, symbolBoundingData, symbolPatternSize, hoverAnimation.

How to use

Basic — repeated circles for daily steps

PictorialBar chart = new PictorialBar()
    .addXAxis(new String[] {"Mon", "Tue", "Wed", "Thu", "Fri"})
    .addYAxis()
    .addSeries(new PictorialBarSeries()
        .setSymbol("circle")
        .setSymbolRepeat(true)
        .setSymbolSize(new Number[] {16, 16})
        .setSymbolMargin("10%")
        .setData(new Number[] {8000, 9500, 12000, 11000, 15000}));

Custom SVG path (person icon)

String personPath = "path://M19 11h-1V7c0-3.31-2.69-6-6-6...";

new PictorialBarSeries()
    .setSymbol(personPath)
    .setSymbolRepeat(true)
    .setSymbolSize(new Number[] {22, 22})
    .setSymbolBoundingData(20)         // each icon = 1/20th of the upper bound
    .setItemStyle(new BarItemStyle().setColor("#2f89cf"))
    .setData(new Number[] {8, 9, 12, 7, 14, 18, 15});

For the runnable visual demo, see src/test/java/org/icepear/echarts/demo/PictorialBarDemo.java — run mvn test -Dtest=PictorialBarDemo then open /tmp/pictorial-bar-demo.html.

Tests added (26 new, all passing)

  • simple/pictorialBar/BasicPictorialBarTest — snapshot
  • charts/pictorialBar/PictorialBarSeriesTest — 22 unit tests covering every overload (symbolSize Number / Number[] / String / String[]; symbolRepeat Boolean / Number / String; symbolMargin Number / String; symbolBoundingData Number / Number[]), per-data-item symbol overrides, bar-layout passthrough (barWidth, barGap, barCategoryGap, etc.), itemStyle/label nesting, emphasis flags, polar coordinate system, null-omission
  • render/simple/RenderPictorialBarByChartTest — Engine smoke test
  • demo/PictorialBarDemo — opt-in HTML writer for visual inspection

Test plan

  • mvn test -Dtest=BasicPictorialBarTest — 1/1
  • mvn test -Dtest=PictorialBarSeriesTest — 22/22
  • mvn test -Dtest=RenderPictorialBarByChartTest — 2/2
  • mvn test -Dtest=PictorialBarDemo then open /tmp/pictorial-bar-demo.html — pictograms render correctly
  • mvn test (full suite) — 102 tests, only the 3 pre-existing polar/float-precision failures remain
CleanShot.2026-05-10.at.20.10.11.mp4

PeiyangYu and others added 2 commits May 10, 2026 19:45
Adds the pictorialBar series (type: "pictorialBar") — a bar chart that
uses repeated symbols (pictograms) instead of solid rectangles. Standard
choice for infographic-style dashboards (icon stacks, progress
pictograms).

The new public API:
- PictorialBar (top-level CartesianCoordChart wrapper, mirrors Bar)
- PictorialBarSeries, PictorialBarDataItem, PictorialBarEmphasis

Reuses BarItemStyleOption / BarLabelOption / BarBackgroundStyleOption
from the existing Bar package — pictorialBar shares those semantics.

The pictogram-specific fields (with the standard Number/String overload
pattern where applicable):
- symbol (preset name or path://... SVG)
- symbolSize, symbolPosition, symbolOffset, symbolRotate
- symbolRepeat (Boolean | Number | String "fixed")
- symbolRepeatDirection
- symbolMargin, symbolClip, symbolBoundingData, symbolPatternSize
- hoverAnimation
All also available per-data-item to override series-level settings.

Tests (26 new, all passing):
- BasicPictorialBarTest (snapshot)
- PictorialBarSeriesTest (22 unit tests covering every overload, all
  three symbolRepeat type variants, per-data-item overrides, bar-layout
  passthrough, item/label nesting, emphasis flags, null-omission)
- RenderPictorialBarByChartTest (Engine smoke test)
- PictorialBarDemo (writes /tmp/pictorial-bar-demo.html — opt-in)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds scripts/config JSON definitions for the PictorialBar series so
PictorialBarSeries, PictorialBarDataItem, PictorialBarEmphasis and the
corresponding origin interfaces are produced by
scripts/config-to-java.py rather than hand-written. Field/method
ordering on the classes shifts to put inherited members ahead of own
members, matching generator output across other charts.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@PeiyangYu PeiyangYu merged commit 6d1f636 into master May 14, 2026
1 check passed
@PeiyangYu PeiyangYu mentioned this pull request May 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants