Percentage Bar

The percentage-bar annotation renderer draws proportional progress indicators anchored to a detection's rectangle bounds. It is ideal for visualizing model confidence scores, tracking probabilities, or custom progression values directly on detections.

The playground uses the frozen basketball fixture's existing detection bounds and confidence scores. Percentage bars are presentation only: they do not change the source detection, picking, or editing behavior.

Add the percentage-bar renderer

session.setPresentation({
  renderers: [
    annotationRenderers.percentageBar({
      style: new BasePercentageBarStyle({
        height: 8,
        placement: PercentageBarPlacement.Top,
      }),
    }),
  ],
});
Copy

BasePercentageBarStyle normalizes detection confidence scores into proportional progress indicators. Configure height, placement (such as Top, Bottom, InsideTop, or InsideBottom), background, and fill colors to customize the display for your use case.