From ce424c3a24df28ad8cb7d53083024f678b0eb47a Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@rokotyan.com>
Date: Tue, 28 Jul 2026 12:57:46 -0700
Subject: [PATCH 1/5] Component | RadialBar: Don't render bars with missing
 values

The `value` accessor result was coerced with `?? 0`, making a missing value
indistinguishable from a real `0`. Keep it as `null` instead, so the arc stays
collapsed and hidden, and let `0` be rendered as an actual data point.

`RadialBarArcDatum.value` is now `number | null` accordingly.

Also make the default `id` accessor null-safe: with gaps in the data, the
record itself can be `null`, which used to throw when reading `d.id`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/ts/src/components/radial-bar/config.ts |  7 +++++--
 packages/ts/src/components/radial-bar/index.ts  | 10 +++++++---
 packages/ts/src/components/radial-bar/types.ts  |  3 ++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/ts/src/components/radial-bar/config.ts b/packages/ts/src/components/radial-bar/config.ts
index 094c022d0..4b03f403b 100644
--- a/packages/ts/src/components/radial-bar/config.ts
+++ b/packages/ts/src/components/radial-bar/config.ts
@@ -7,7 +7,9 @@ import { ColorAccessor, NumericAccessor } from '@/types/accessor'
 export interface RadialBarConfigInterface<Datum> extends ComponentConfigInterface {
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   id?: ((d: Datum, i: number, ...any: unknown[]) => string | number);
-  /** Value accessor function. Default: `undefined` */
+  /** Value accessor function. Returning `null` or `undefined` marks the value as missing,
+   * and the corresponding bar will not be rendered. Default: `undefined`
+   */
   value: NumericAccessor<Datum>;
   /** Maximum value accessor or an array of maximums (indexed by each datum's original position in `data` before sorting).
    * Used to scale each bar's arc length: each bar fills `(value / maxValue) * (angleRange[1] - angleRange[0])`.
@@ -53,7 +55,8 @@ export interface RadialBarConfigInterface<Datum> extends ComponentConfigInterfac
 
 export const RadialBarDefaultConfig: RadialBarConfigInterface<unknown> = {
   ...ComponentDefaultConfig,
-  id: (d: unknown, i: number): string | number => (d as { id: string }).id ?? i,
+  // Optional chaining because a data record itself can be `null` when the data has gaps
+  id: (d: unknown, i: number): string | number => (d as { id: string })?.id ?? i,
   value: undefined,
   maxValue: undefined,
   angleRange: [0, 2 * Math.PI],
diff --git a/packages/ts/src/components/radial-bar/index.ts b/packages/ts/src/components/radial-bar/index.ts
index 2d3f4880c..7d05f24c5 100644
--- a/packages/ts/src/components/radial-bar/index.ts
+++ b/packages/ts/src/components/radial-bar/index.ts
@@ -109,8 +109,12 @@ export class RadialBar<Datum> extends ComponentCore<Datum[], RadialBarConfigInte
       ? clamp(ringStride - trackPadding, 1, ringStride)
       : trackWidth
 
-    // Resolve per-bar value and max
-    const values = wrapped.map((d) => getNumber(d.datum, config.value, d.index) ?? 0)
+    // Resolve per-bar value and max. `null` and `undefined` are treated as missing data:
+    // such bars are not rendered at all.
+    const values = wrapped.map((d) => {
+      const value = getNumber(d.datum, config.value, d.index)
+      return isNumber(value) && isFinite(value) ? value : null
+    })
     const dataMax = max(values) ?? 0
     const maxValues = wrapped.map((d) => {
       const mv = config.maxValue
@@ -130,7 +134,7 @@ export class RadialBar<Datum> extends ComponentCore<Datum[], RadialBarConfigInte
 
       const value = values[i]
       const perMax = maxValues[i]
-      const fraction = clamp(value / perMax, 0, 1)
+      const fraction = value === null ? 0 : clamp(value / perMax, 0, 1)
 
       return {
         data: d.datum,
diff --git a/packages/ts/src/components/radial-bar/types.ts b/packages/ts/src/components/radial-bar/types.ts
index d0187fef5..e8326ca58 100644
--- a/packages/ts/src/components/radial-bar/types.ts
+++ b/packages/ts/src/components/radial-bar/types.ts
@@ -11,7 +11,8 @@ export interface RadialBarArcDatum<Datum> {
   index: number;
   /** Index of the ring counted from the outermost (`0` = outermost). */
   ringIndex: number;
-  value: number;
+  /** Resolved value. `null` when the `value` accessor returned `null`, `undefined` or a non-finite number */
+  value: number | null;
   startAngle: number;
   endAngle: number;
   innerRadius: number;

From 249e425c5a1f53370a892e31600d4593e69e167e Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@rokotyan.com>
Date: Tue, 28 Jul 2026 12:58:08 -0700
Subject: [PATCH 2/5] Component | RadialBar: Add `barMinAngle` config property

Bars representing tiny values were collapsing into an invisible hairline.
`barMinAngle` sets the minimum angular extent of a bar in radians, `0` values
included, so that they stay on screen. It defaults to `0.01`, which is about
one pixel wide on a ring of a 100 pixel radius, and it's clamped to the length
of `angleRange`. Bars with missing values are unaffected: they're never drawn.

The minimum is applied along the sweep direction, so reversed angle ranges,
e.g. `[0, -2 * Math.PI]`, keep rendering counter-clockwise.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/ts/src/components/radial-bar/config.ts |  7 +++++++
 packages/ts/src/components/radial-bar/index.ts  | 12 ++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/ts/src/components/radial-bar/config.ts b/packages/ts/src/components/radial-bar/config.ts
index 4b03f403b..b0ab6ec8d 100644
--- a/packages/ts/src/components/radial-bar/config.ts
+++ b/packages/ts/src/components/radial-bar/config.ts
@@ -20,6 +20,12 @@ export interface RadialBarConfigInterface<Datum> extends ComponentConfigInterfac
   angleRange?: [number, number];
   /** Pad angle in radians applied between the bar and its end. Default: `0` */
   padAngle?: number;
+  /** Minimum bar angle in radians. Bars with small values, `0` included, will be extended to that angle,
+   * so that they remain visible. The value is clamped to the length of `angleRange`.
+   * Bars with missing values (see `value`) are not affected: they're never rendered.
+   * Set it to `0` to disable. Default: `0.01` (about 1 pixel wide on a ring of a 100 pixel radius)
+   */
+  barMinAngle?: number;
   /** Custom sort function. Default: `undefined` */
   sortFunction?: (a: Datum, b: Datum) => number;
   /** Corner Radius. Default: `0` */
@@ -61,6 +67,7 @@ export const RadialBarDefaultConfig: RadialBarConfigInterface<unknown> = {
   maxValue: undefined,
   angleRange: [0, 2 * Math.PI],
   padAngle: 0,
+  barMinAngle: 0.01,
   sortFunction: undefined,
   cornerRadius: 0,
   color: undefined,
diff --git a/packages/ts/src/components/radial-bar/index.ts b/packages/ts/src/components/radial-bar/index.ts
index 7d05f24c5..b9b8b205f 100644
--- a/packages/ts/src/components/radial-bar/index.ts
+++ b/packages/ts/src/components/radial-bar/index.ts
@@ -86,6 +86,10 @@ export class RadialBar<Datum> extends ComponentCore<Datum[], RadialBarConfigInte
     const endAngle = config.angleRange?.[1] ?? 2 * Math.PI
     const angleRange = endAngle - startAngle
 
+    // Angle ranges can be reversed (e.g. `[Math.PI, 0]`), so we keep the sweep direction separate from its length
+    const angleDirection = angleRange < 0 ? -1 : 1
+    const barMinAngle = clamp(config.barMinAngle ?? 0, 0, Math.abs(angleRange))
+
     const unitBBox = getArcUnitBoundingBox(startAngle, endAngle)
     const bboxW = unitBBox.xMax - unitBBox.xMin
     const bboxH = unitBBox.yMax - unitBBox.yMin
@@ -110,7 +114,7 @@ export class RadialBar<Datum> extends ComponentCore<Datum[], RadialBarConfigInte
       : trackWidth
 
     // Resolve per-bar value and max. `null` and `undefined` are treated as missing data:
-    // such bars are not rendered at all.
+    // such bars are not rendered at all, unlike `0` values, which still get `barMinAngle`.
     const values = wrapped.map((d) => {
       const value = getNumber(d.datum, config.value, d.index)
       return isNumber(value) && isFinite(value) ? value : null
@@ -136,13 +140,17 @@ export class RadialBar<Datum> extends ComponentCore<Datum[], RadialBarConfigInte
       const perMax = maxValues[i]
       const fraction = value === null ? 0 : clamp(value / perMax, 0, 1)
 
+      // Bars with small values (including `0`) are extended to `barMinAngle` to stay visible.
+      // Bars with missing values are left collapsed and hidden (see `setOpacity` in `modules/bar`).
+      const sweepAngle = value === null ? 0 : Math.max(Math.abs(fraction * angleRange), barMinAngle)
+
       return {
         data: d.datum,
         index: d.index,
         ringIndex,
         value,
         startAngle,
-        endAngle: startAngle + fraction * angleRange,
+        endAngle: startAngle + angleDirection * sweepAngle,
         innerRadius: inner,
         outerRadius: outer,
         padAngle: config.padAngle,

From b9c9f42cbfd4c7dd96ab51bc3baa3e19ad3aa1f9 Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@rokotyan.com>
Date: Tue, 28 Jul 2026 12:58:18 -0700
Subject: [PATCH 3/5] Angular: Add `barMinAngle` to the Radial Bar wrapper

Hand-written to match the generated style: `pnpm generate` currently rewrites
every component's imports into internal `@/*` alias paths, which don't resolve
in this package.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../components/radial-bar/radial-bar.component.ts   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/angular/src/components/radial-bar/radial-bar.component.ts b/packages/angular/src/components/radial-bar/radial-bar.component.ts
index e73d1b8ff..412e70a52 100644
--- a/packages/angular/src/components/radial-bar/radial-bar.component.ts
+++ b/packages/angular/src/components/radial-bar/radial-bar.component.ts
@@ -63,7 +63,8 @@ export class VisRadialBarComponent<Datum> implements RadialBarConfigInterface<Da
   /** Accessor function for getting the unique data record id. Used for more persistent data updates. Default: `(d, i) => d.id ?? i` */
   @Input() id?: ((d: Datum, i: number, ...rest) => string | number)
 
-  /** Value accessor function. Default: `undefined` */
+  /** Value accessor function. Returning `null` or `undefined` marks the value as missing,
+   * and the corresponding bar will not be rendered. Default: `undefined` */
   @Input() value: NumericAccessor<Datum>
 
   /** Maximum value accessor or an array of maximums (indexed by each datum's original position in `data` before sorting).
@@ -77,6 +78,12 @@ export class VisRadialBarComponent<Datum> implements RadialBarConfigInterface<Da
   /** Pad angle in radians applied between the bar and its end. Default: `0` */
   @Input() padAngle?: number
 
+  /** Minimum bar angle in radians. Bars with small values, `0` included, will be extended to that angle,
+   * so that they remain visible. The value is clamped to the length of `angleRange`.
+   * Bars with missing values (see `value`) are not affected: they're never rendered.
+   * Set it to `0` to disable. Default: `0.01` (about 1 pixel wide on a ring of a 100 pixel radius) */
+  @Input() barMinAngle?: number
+
   /** Custom sort function. Default: `undefined` */
   @Input() sortFunction?: (a: Datum, b: Datum) => number
 
@@ -141,8 +148,8 @@ export class VisRadialBarComponent<Datum> implements RadialBarConfigInterface<Da
   }
 
   private getConfig (): RadialBarConfigInterface<Datum> {
-    const { duration, events, attributes, id, value, maxValue, angleRange, padAngle, sortFunction, cornerRadius, color, radius, trackWidth, trackPadding, reverseOrder, centralLabel, centralSubLabel, centralSubLabelWrap, centralLabelOffsetX, centralLabelOffsetY, showBackground, backgroundAngleRange } = this
-    const config = { duration, events, attributes, id, value, maxValue, angleRange, padAngle, sortFunction, cornerRadius, color, radius, trackWidth, trackPadding, reverseOrder, centralLabel, centralSubLabel, centralSubLabelWrap, centralLabelOffsetX, centralLabelOffsetY, showBackground, backgroundAngleRange }
+    const { duration, events, attributes, id, value, maxValue, angleRange, padAngle, barMinAngle, sortFunction, cornerRadius, color, radius, trackWidth, trackPadding, reverseOrder, centralLabel, centralSubLabel, centralSubLabelWrap, centralLabelOffsetX, centralLabelOffsetY, showBackground, backgroundAngleRange } = this
+    const config = { duration, events, attributes, id, value, maxValue, angleRange, padAngle, barMinAngle, sortFunction, cornerRadius, color, radius, trackWidth, trackPadding, reverseOrder, centralLabel, centralSubLabel, centralSubLabelWrap, centralLabelOffsetX, centralLabelOffsetY, showBackground, backgroundAngleRange }
     const keys = Object.keys(config) as (keyof RadialBarConfigInterface<Datum>)[]
     keys.forEach(key => { if (config[key] === undefined) delete config[key] })
 

From b60fb38678e41ab3acd5c7b89107ca73c6b2e54e Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@rokotyan.com>
Date: Tue, 28 Jul 2026 12:58:40 -0700
Subject: [PATCH 4/5] Dev | Examples | Radial Bar: Min angle example

Side-by-side cases for `barMinAngle`: disabled, the default, a large value,
combined with `padAngle`, half and reversed angle ranges, and a value above
the angle range to check clamping. The data covers a tiny value, a `0`, and a
`null` to show that missing values stay unrendered.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../radial-bar/radial-bar-min-angle/index.tsx | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 packages/dev/src/examples/misc/radial-bar/radial-bar-min-angle/index.tsx

diff --git a/packages/dev/src/examples/misc/radial-bar/radial-bar-min-angle/index.tsx b/packages/dev/src/examples/misc/radial-bar/radial-bar-min-angle/index.tsx
new file mode 100644
index 000000000..71ea1e8a5
--- /dev/null
+++ b/packages/dev/src/examples/misc/radial-bar/radial-bar-min-angle/index.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { VisSingleContainer, VisRadialBar } from '@unovis/react'
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+
+export const title = 'Radial Bar Min Angle'
+export const subTitle = 'Keeping bars with tiny and zero values visible'
+
+type DataRecord = { key: string; value: number | null }
+
+const data: DataRecord[] = [
+  { key: 'Errors', value: 0.05 },
+  { key: 'Warnings', value: 12 },
+  { key: 'Info', value: 64 },
+  { key: 'Debug', value: 0 },
+  { key: 'Trace', value: null }, // Missing data: the bar is not rendered
+]
+
+const cases: {
+  label: string;
+  barMinAngle: number;
+  angleRange?: [number, number];
+  padAngle?: number;
+}[] = [
+  { label: 'barMinAngle: 0 (disabled)', barMinAngle: 0 },
+  { label: 'barMinAngle: 0.01 (default)', barMinAngle: 0.01 },
+  { label: 'barMinAngle: 0.2', barMinAngle: 0.2 },
+  { label: 'barMinAngle: 0.2, padAngle: 0.05', barMinAngle: 0.2, padAngle: 0.05 },
+  { label: 'barMinAngle: 0.2, top half', barMinAngle: 0.2, angleRange: [-Math.PI / 2, Math.PI / 2] },
+  { label: 'barMinAngle: 0.2, reversed range', barMinAngle: 0.2, angleRange: [0, -2 * Math.PI] },
+  { label: 'barMinAngle: 10 → clamped to 2π', barMinAngle: 10 },
+]
+
+export const component = (props: ExampleViewerDurationProps): React.ReactNode => (
+  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 16, width: '100%' }}>
+    {cases.map(c => (
+      <div key={c.label} style={{ border: '1px solid #e5e7eb', borderRadius: 8, padding: 8, minWidth: 0 }}>
+        <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 4 }}>{c.label}</div>
+        <VisSingleContainer height={240}>
+          <VisRadialBar<DataRecord>
+            value={d => d.value}
+            maxValue={100}
+            data={data}
+            duration={props.duration}
+            angleRange={c.angleRange}
+            padAngle={c.padAngle}
+            barMinAngle={c.barMinAngle}
+            trackWidth={14}
+            trackPadding={4}
+            cornerRadius={7}
+          />
+        </VisSingleContainer>
+      </div>
+    ))}
+  </div>
+)

From 66d861b60cd6f37da77ad416bb87916782c6988d Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@rokotyan.com>
Date: Tue, 28 Jul 2026 12:58:52 -0700
Subject: [PATCH 5/5] Website | Docs: Radial Bar minimum bar angle

Document `barMinAngle` with an interactive slider, and the difference between
a `0` value and a missing one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/website/docs/misc/RadialBar.mdx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/website/docs/misc/RadialBar.mdx b/packages/website/docs/misc/RadialBar.mdx
index 41bf31df0..36660d172 100644
--- a/packages/website/docs/misc/RadialBar.mdx
+++ b/packages/website/docs/misc/RadialBar.mdx
@@ -62,6 +62,24 @@ partial range — useful for semicircular or gauge-style charts.
 For partial arcs the chart's origin lands on the bbox edge of the visible arc, so you may want to combine `centralLabelOffsetY` with the `--vis-radial-bar-central-label-text-anchor` / `--vis-radial-bar-central-sub-label-text-anchor` CSS variables (`start` / `middle` / `end`) to align the labels toward the side the arc opens to.
 <DocWrapper {...radialBarProps()} angleRange={[-Math.PI / 2, Math.PI / 2]} centralLabel="Gauge" centralLabelOffsetY={-15}/>
 
+## Minimum Bar Angle
+Bars representing very small values can become too short to notice. `barMinAngle` sets the minimum angular extent
+of a bar in radians, so that such bars remain visible. It defaults to `0.01`, which is about one pixel wide on a
+ring of a 100 pixel radius — increase it to make small values more prominent, or set it to `0` to disable.
+The value is clamped to the length of `angleRange`.
+
+`0` counts as a value, so zero bars are rendered with the minimum angle too. Missing data is different: when the
+`value` accessor returns `null` or `undefined`, the bar is not rendered at all and only its background track remains.
+In the example below the rings are, from the outside in: a tiny value, a regular value, `0`, and `null`:
+<InputWrapper {...radialBarProps()}
+  data={[0.0005, 0.35, 0, null]}
+  maxValue={1}
+  property="barMinAngle"
+  defaultValue={0.15}
+  inputType="range"
+  inputProps={{ min: 0, max: 1, step: 0.01 }}
+/>
+
 ## Stacking Order
 By default `data[0]` is the **outermost** ring and subsequent data render inward. Set `reverseOrder` to `true`
 to flip the order: