@fusedashlabs/widgets 0.2.0 → 0.4.0

package/dist/components/lollipop/lib/domain.js

@@ -1,3 +1,27 @@
+import { calculateScaleLinearDomain } from "../../../utils/fusedash-visual.js";
+function valueAt(series, label) {
+  const point = series.points.find((p) => p.label === label);
+  return point && Number.isFinite(point.value) ? point.value : void 0;
+}
+function stackSegments(series, label) {
+  let pos = 0;
+  let neg = 0;
+  const out = [];
+  series.forEach((s, seriesIndex) => {
+    const value = valueAt(s, label);
+    if (value == null || value === 0) return;
+    if (value > 0) {
+      const start = pos;
+      pos += value;
+      out.push({ series: s, seriesIndex, start, end: pos, value });
+    } else {
+      const start = neg;
+      neg += value;
+      out.push({ series: s, seriesIndex, start, end: neg, value });
+    }
+  });
+  return out;
+}
 function collectLabels(series, labelHint) {
   const seen = /* @__PURE__ */ new Set();
   const fromData = [];
@@ -36,8 +60,39 @@ function collectValueExtent(series) {
   }
   return [min, max];
 }
+function collectLollipopValueDomain(series, layout = "grouped", labelHint) {
+  const stacked = layout === "stacked" && series.length > 1;
+  const values = [];
+  if (stacked) {
+    for (const label of collectLabels(series, labelHint)) {
+      let pos = 0;
+      let neg = 0;
+      for (const s of series) {
+        const v = valueAt(s, label);
+        if (v == null) continue;
+        if (v > 0) pos += v;
+        else neg += v;
+      }
+      if (pos) values.push(pos);
+      if (neg) values.push(neg);
+    }
+  } else {
+    for (const s of series) {
+      for (const p of s.points) {
+        if (Number.isFinite(p.value)) values.push(p.value);
+      }
+    }
+  }
+  const [minV, maxV] = calculateScaleLinearDomain(values);
+  const domainMin = minV * 1.2;
+  const domainMax = maxV === 0 && minV === 0 ? 1 : maxV * 1.2;
+  return [domainMin, domainMax];
+}
 export {
   collectLabels,
-  collectValueExtent
+  collectLollipopValueDomain,
+  collectValueExtent,
+  stackSegments,
+  valueAt
 };
 //# sourceMappingURL=domain.js.map

package/dist/components/lollipop/lib/domain.js.map

@@ -1 +1 @@
-{"version":3,"file":"domain.js","sources":["../../../../src/components/lollipop/lib/domain.ts"],"sourcesContent":["import type { LollipopSeries } from './types.js';\n\nexport function collectLabels(\n  series: LollipopSeries[],\n  labelHint?: string[],\n): string[] {\n  const seen = new Set<string>();\n  const fromData: string[] = [];\n  for (const s of series) {\n    for (const p of s.points) {\n      if (!seen.has(p.label)) {\n        seen.add(p.label);\n        fromData.push(p.label);\n      }\n    }\n  }\n  if (labelHint?.length) {\n    const ordered = labelHint.filter((l) => seen.has(l));\n    for (const l of fromData) {\n      if (!ordered.includes(l)) ordered.push(l);\n    }\n    return ordered;\n  }\n  return fromData;\n}\n\nexport function collectValueExtent(series: LollipopSeries[]): [number, number] {\n  let min = Infinity;\n  let max = -Infinity;\n  for (const s of series) {\n    for (const p of s.points) {\n      if (p.value < min) min = p.value;\n      if (p.value > max) max = p.value;\n    }\n  }\n  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];\n  // Always include 0 baseline for lollipop stems\n  min = Math.min(0, min);\n  max = Math.max(0, max);\n  if (min === max) {\n    const pad = Math.abs(min) * 0.1 || 1;\n    return [min - pad, max + pad];\n  }\n  return [min, max];\n}\n"],"names":[],"mappings":"AAEO,SAAS,cACd,QACA,WACU;AACV,QAAM,2BAAW,IAAA;AACjB,QAAM,WAAqB,CAAA;AAC3B,aAAW,KAAK,QAAQ;AACtB,eAAW,KAAK,EAAE,QAAQ;AACxB,UAAI,CAAC,KAAK,IAAI,EAAE,KAAK,GAAG;AACtB,aAAK,IAAI,EAAE,KAAK;AAChB,iBAAS,KAAK,EAAE,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACA,MAAI,uCAAW,QAAQ;AACrB,UAAM,UAAU,UAAU,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC;AACnD,eAAW,KAAK,UAAU;AACxB,UAAI,CAAC,QAAQ,SAAS,CAAC,EAAG,SAAQ,KAAK,CAAC;AAAA,IAC1C;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,SAAS,mBAAmB,QAA4C;AAC7E,MAAI,MAAM;AACV,MAAI,MAAM;AACV,aAAW,KAAK,QAAQ;AACtB,eAAW,KAAK,EAAE,QAAQ;AACxB,UAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;AAC3B,UAAI,EAAE,QAAQ,IAAK,OAAM,EAAE;AAAA,IAC7B;AAAA,EACF;AACA,MAAI,CAAC,OAAO,SAAS,GAAG,KAAK,CAAC,OAAO,SAAS,GAAG,EAAG,QAAO,CAAC,GAAG,CAAC;AAEhE,QAAM,KAAK,IAAI,GAAG,GAAG;AACrB,QAAM,KAAK,IAAI,GAAG,GAAG;AACrB,MAAI,QAAQ,KAAK;AACf,UAAM,MAAM,KAAK,IAAI,GAAG,IAAI,OAAO;AACnC,WAAO,CAAC,MAAM,KAAK,MAAM,GAAG;AAAA,EAC9B;AACA,SAAO,CAAC,KAAK,GAAG;AAClB;"}
+{"version":3,"file":"domain.js","sources":["../../../../src/components/lollipop/lib/domain.ts"],"sourcesContent":["import { calculateScaleLinearDomain } from '../../../utils/fusedash-visual.js';\nimport type { LollipopLayout, LollipopSeries } from './types.js';\n\nexport function valueAt(\n  series: LollipopSeries,\n  label: string,\n): number | undefined {\n  const point = series.points.find((p) => p.label === label);\n  return point && Number.isFinite(point.value) ? point.value : undefined;\n}\n\nexport interface LollipopStackSegment {\n  series: LollipopSeries;\n  seriesIndex: number;\n  start: number;\n  end: number;\n  value: number;\n}\n\n/** Positive and negative halves stack away from 0 independently (FuseDash). */\nexport function stackSegments(\n  series: LollipopSeries[],\n  label: string,\n): LollipopStackSegment[] {\n  let pos = 0;\n  let neg = 0;\n  const out: LollipopStackSegment[] = [];\n  series.forEach((s, seriesIndex) => {\n    const value = valueAt(s, label);\n    if (value == null || value === 0) return;\n    if (value > 0) {\n      const start = pos;\n      pos += value;\n      out.push({ series: s, seriesIndex, start, end: pos, value });\n    } else {\n      const start = neg;\n      neg += value;\n      out.push({ series: s, seriesIndex, start, end: neg, value });\n    }\n  });\n  return out;\n}\n\nexport function collectLabels(\n  series: LollipopSeries[],\n  labelHint?: string[],\n): string[] {\n  const seen = new Set<string>();\n  const fromData: string[] = [];\n  for (const s of series) {\n    for (const p of s.points) {\n      if (!seen.has(p.label)) {\n        seen.add(p.label);\n        fromData.push(p.label);\n      }\n    }\n  }\n  if (labelHint?.length) {\n    const ordered = labelHint.filter((l) => seen.has(l));\n    for (const l of fromData) {\n      if (!ordered.includes(l)) ordered.push(l);\n    }\n    return ordered;\n  }\n  return fromData;\n}\n\nexport function collectValueExtent(series: LollipopSeries[]): [number, number] {\n  let min = Infinity;\n  let max = -Infinity;\n  for (const s of series) {\n    for (const p of s.points) {\n      if (p.value < min) min = p.value;\n      if (p.value > max) max = p.value;\n    }\n  }\n  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];\n  // Always include 0 baseline for lollipop stems\n  min = Math.min(0, min);\n  max = Math.max(0, max);\n  if (min === max) {\n    const pad = Math.abs(min) * 0.1 || 1;\n    return [min - pad, max + pad];\n  }\n  return [min, max];\n}\n\n/**\n * Value-axis domain used by the plot: `calculateScaleLinearDomain` × 1.2\n * (FuseDash lollipop). Stacked layout uses per-category stack totals.\n */\nexport function collectLollipopValueDomain(\n  series: LollipopSeries[],\n  layout: LollipopLayout = 'grouped',\n  labelHint?: string[],\n): [number, number] {\n  const stacked = layout === 'stacked' && series.length > 1;\n  const values: number[] = [];\n  if (stacked) {\n    for (const label of collectLabels(series, labelHint)) {\n      let pos = 0;\n      let neg = 0;\n      for (const s of series) {\n        const v = valueAt(s, label);\n        if (v == null) continue;\n        if (v > 0) pos += v;\n        else neg += v;\n      }\n      if (pos) values.push(pos);\n      if (neg) values.push(neg);\n    }\n  } else {\n    for (const s of series) {\n      for (const p of s.points) {\n        if (Number.isFinite(p.value)) values.push(p.value);\n      }\n    }\n  }\n  const [minV, maxV] = calculateScaleLinearDomain(values);\n  const domainMin = minV * 1.2;\n  const domainMax = maxV === 0 && minV === 0 ? 1 : maxV * 1.2;\n  return [domainMin, domainMax];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/lollipop/lib/index.d.ts

@@ -1,5 +1,6 @@
-export { type LollipopChartData, type LollipopOrientation, type LollipopPoint, type LollipopSeries, } from './types.js';
+export { type LollipopChartData, type LollipopLayout, type LollipopOrientation, type LollipopPoint, type LollipopSeries, } from './types.js';
 export { normalizeLollipopData } from './normalize.js';
-export { collectLabels, collectValueExtent } from './domain.js';
+export { collectLabels, collectLollipopValueDomain, collectValueExtent, stackSegments, valueAt, type LollipopStackSegment, } from './domain.js';
 export { formatCompact } from './format.js';
+export { lollipopGroupHeight, lollipopHorizontalMinSpan, LOLLIPOP_GROUP_PADDING, LOLLIPOP_ROW_HEIGHT, } from './layout.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/lollipop/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/lollipop/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,cAAc,GACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/lollipop/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,cAAc,GACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EACL,aAAa,EACb,0BAA0B,EAC1B,kBAAkB,EAClB,aAAa,EACb,OAAO,EACP,KAAK,oBAAoB,GAC1B,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,aAAa,CAAC"}

package/dist/components/lollipop/lib/layout.d.ts

@@ -0,0 +1,16 @@
+/** Client HorizontalLollipop `barHeight`. */
+export declare const LOLLIPOP_ROW_HEIGHT = 10;
+/** Client `groupPadding = barHeight * 2`. */
+export declare const LOLLIPOP_GROUP_PADDING: number;
+/**
+ * Height of one category band: `barHeight * groupsCount`.
+ * Grouped and stacked both size the band from series count (client `groupsCount`).
+ */
+export declare function lollipopGroupHeight(seriesCount: number): number;
+/**
+ * Minimum plot height for a horizontal lollipop.
+ * Client: `yAxes.length * (groupHeight + groupPadding)`.
+ * Grouped and stacked both size the band from series count (client `groupsCount`).
+ */
+export declare function lollipopHorizontalMinSpan(categoryCount: number, seriesCount: number): number;
+//# sourceMappingURL=layout.d.ts.map

package/dist/components/lollipop/lib/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/components/lollipop/lib/layout.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,6CAA6C;AAC7C,eAAO,MAAM,sBAAsB,QAA0B,CAAC;AAE9D;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,GAClB,MAAM,CAGR"}

package/dist/components/lollipop/lib/layout.js

@@ -0,0 +1,16 @@
+const LOLLIPOP_ROW_HEIGHT = 10;
+const LOLLIPOP_GROUP_PADDING = LOLLIPOP_ROW_HEIGHT * 2;
+function lollipopGroupHeight(seriesCount) {
+  return LOLLIPOP_ROW_HEIGHT * Math.max(seriesCount, 1);
+}
+function lollipopHorizontalMinSpan(categoryCount, seriesCount) {
+  if (categoryCount <= 0) return 0;
+  return categoryCount * (lollipopGroupHeight(seriesCount) + LOLLIPOP_GROUP_PADDING);
+}
+export {
+  LOLLIPOP_GROUP_PADDING,
+  LOLLIPOP_ROW_HEIGHT,
+  lollipopGroupHeight,
+  lollipopHorizontalMinSpan
+};
+//# sourceMappingURL=layout.js.map

package/dist/components/lollipop/lib/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sources":["../../../../src/components/lollipop/lib/layout.ts"],"sourcesContent":["/** Client HorizontalLollipop `barHeight`. */\nexport const LOLLIPOP_ROW_HEIGHT = 10;\n/** Client `groupPadding = barHeight * 2`. */\nexport const LOLLIPOP_GROUP_PADDING = LOLLIPOP_ROW_HEIGHT * 2;\n\n/**\n * Height of one category band: `barHeight * groupsCount`.\n * Grouped and stacked both size the band from series count (client `groupsCount`).\n */\nexport function lollipopGroupHeight(seriesCount: number): number {\n  return LOLLIPOP_ROW_HEIGHT * Math.max(seriesCount, 1);\n}\n\n/**\n * Minimum plot height for a horizontal lollipop.\n * Client: `yAxes.length * (groupHeight + groupPadding)`.\n * Grouped and stacked both size the band from series count (client `groupsCount`).\n */\nexport function lollipopHorizontalMinSpan(\n  categoryCount: number,\n  seriesCount: number,\n): number {\n  if (categoryCount <= 0) return 0;\n  return categoryCount * (lollipopGroupHeight(seriesCount) + LOLLIPOP_GROUP_PADDING);\n}\n"],"names":[],"mappings":"AACO,MAAM,sBAAsB;AAE5B,MAAM,yBAAyB,sBAAsB;AAMrD,SAAS,oBAAoB,aAA6B;AAC/D,SAAO,sBAAsB,KAAK,IAAI,aAAa,CAAC;AACtD;AAOO,SAAS,0BACd,eACA,aACQ;AACR,MAAI,iBAAiB,EAAG,QAAO;AAC/B,SAAO,iBAAiB,oBAAoB,WAAW,IAAI;AAC7D;"}

package/dist/components/lollipop/lib/types.d.ts

@@ -1,4 +1,9 @@
 export type LollipopOrientation = 'vertical' | 'horizontal';
+/**
+ * FuseDash `stacked` — only meaningful with more than one series (`groupBy`).
+ * A single series always renders as the plain lollipop chart.
+ */
+export type LollipopLayout = 'grouped' | 'stacked';
 export interface LollipopPoint {
     label: string;
     value: number;

package/dist/components/lollipop/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/lollipop/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/lollipop/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;CAC3B"}

package/dist/components/lollipop/metadata.json.d.ts

@@ -4,6 +4,11 @@ declare const _default: {
   "title": "Lollipop Chart",
   "description": "Chat-optimized lollipop rewritten in D3 (Visx → D3). Vertical/horizontal, stem + head, no Redux.",
   "chartTypeKeys": ["lollipopChart", "lollipopGroupedChart", "lollipopStackedChart"],
+  "chartTypeMap": {
+    "lollipopChart": {},
+    "lollipopGroupedChart": { "layout": "grouped" },
+    "lollipopStackedChart": { "layout": "stacked" }
+  },
   "source": "client/libs/shared/components/src/Widgets/Lollipop/",
   "stack": "d3",
   "lazyImport": "@ui9000/widgets/lazy/lollipop",
@@ -78,6 +83,11 @@ declare const _default: {
         "enum": ["vertical", "horizontal"],
         "default": "vertical"
       },
+      "layout": {
+        "type": "string",
+        "enum": ["grouped", "stacked"],
+        "default": "grouped"
+      },
       "scale": {
         "type": "string",
         "enum": ["compact", "default", "comfortable"],

package/dist/components/lollipop/metadata.json.js

@@ -3,19 +3,21 @@ const tag = "ui9000-lollipop";
 const title = "Lollipop Chart";
 const description = "Chat-optimized lollipop rewritten in D3 (Visx → D3). Vertical/horizontal, stem + head, no Redux.";
 const chartTypeKeys = ["lollipopChart", "lollipopGroupedChart", "lollipopStackedChart"];
+const chartTypeMap = { "lollipopChart": {}, "lollipopGroupedChart": { "layout": "grouped" }, "lollipopStackedChart": { "layout": "stacked" } };
 const source = "client/libs/shared/components/src/Widgets/Lollipop/";
 const stack = "d3";
 const lazyImport = "@ui9000/widgets/lazy/lollipop";
 const entry = "@ui9000/widgets/lollipop";
 const usageConditions = { "host": "mcp-chat", "notFor": "fusedash-editor", "mapsExcluded": true };
 const allowedActions = ["hover", "resize"];
-const propsSchema = { "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "data": { "oneOf": [{ "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" }, "color": { "type": "string" } } } }, { "type": "object", "properties": { "points": { "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" } } } }, "series": { "type": "array", "items": { "type": "object", "required": ["id", "points"], "properties": { "id": { "type": "string" }, "name": { "type": "string" }, "color": { "type": "string" }, "points": { "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" } } } } } } } } }] }, "orientation": { "type": "string", "enum": ["vertical", "horizontal"], "default": "vertical" }, "scale": { "type": "string", "enum": ["compact", "default", "comfortable"], "default": "default" }, "showGrid": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true }, "showTooltip": { "type": "boolean", "default": true }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" } }, "required": ["data"] };
+const propsSchema = { "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "data": { "oneOf": [{ "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" }, "color": { "type": "string" } } } }, { "type": "object", "properties": { "points": { "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" } } } }, "series": { "type": "array", "items": { "type": "object", "required": ["id", "points"], "properties": { "id": { "type": "string" }, "name": { "type": "string" }, "color": { "type": "string" }, "points": { "type": "array", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" } } } } } } } } }] }, "orientation": { "type": "string", "enum": ["vertical", "horizontal"], "default": "vertical" }, "layout": { "type": "string", "enum": ["grouped", "stacked"], "default": "grouped" }, "scale": { "type": "string", "enum": ["compact", "default", "comfortable"], "default": "default" }, "showGrid": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true }, "showTooltip": { "type": "boolean", "default": true }, "xLabel": { "type": "string" }, "yLabel": { "type": "string" } }, "required": ["data"] };
 const lollipopMeta = {
   id,
   tag,
   title,
   description,
   chartTypeKeys,
+  chartTypeMap,
   source,
   stack,
   lazyImport,
@@ -27,6 +29,7 @@ const lollipopMeta = {
 export {
   allowedActions,
   chartTypeKeys,
+  chartTypeMap,
   lollipopMeta as default,
   description,
   entry,

package/dist/components/lollipop/metadata.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"metadata.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/lollipop/render/draw.d.ts

@@ -1,7 +1,7 @@
 import { WidgetTheme } from '../../../types/index.js';
 import { AxisLabelTooltipHandlers } from '../../../utils/axis-labels.js';
 import { MarkerShape } from '../../../utils/fusedash-visual.js';
-import { LollipopOrientation, LollipopPoint, LollipopSeries } from '../lib/index.js';
+import { LollipopLayout, LollipopOrientation, LollipopPoint, LollipopSeries } from '../lib/index.js';
 export interface RenderLollipopOptions extends AxisLabelTooltipHandlers {
     series: LollipopSeries[];
     width: number;
@@ -14,6 +14,8 @@ export interface RenderLollipopOptions extends AxisLabelTooltipHandlers {
     };
     theme: WidgetTheme;
     orientation?: LollipopOrientation;
+    /** Multi-series only — a single series always renders as the plain lollipop */
+    layout?: LollipopLayout;
     /** FuseDash default: rhombus */
     marker?: MarkerShape;
     showGrid?: boolean;
@@ -21,6 +23,11 @@ export interface RenderLollipopOptions extends AxisLabelTooltipHandlers {
     labelHint?: string[];
     xLabel?: string;
     yLabel?: string;
+    /**
+     * When set on a horizontal chart, the value axis is drawn here and pinned
+     * below the scroll area (client `hasChartYOverflow` + bottom axis SVG).
+     */
+    xAxisContainer?: HTMLElement | null;
     onPointHover?: (payload: {
         seriesId: string;
         seriesName: string;

package/dist/components/lollipop/render/draw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/components/lollipop/render/draw.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,OAAO,EAQL,KAAK,WAAW,EACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,KAAK,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QACvB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,aAAa,CAAC;QACrB,KAAK,EAAE,UAAU,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AASD;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,qBAAqB,GAC7B,IAAI,CAuXN"}
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/components/lollipop/render/draw.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,KAAK,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QACvB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,aAAa,CAAC;QACrB,KAAK,EAAE,UAAU,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AASD;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,qBAAqB,GAC7B,IAAI,CA2eN"}

package/dist/components/lollipop/render/draw.js

@@ -2,8 +2,9 @@ import { axisBottom, axisLeft } from "d3-axis";
 import { scaleBand, scaleLinear } from "d3-scale";
 import { select } from "d3-selection";
 import { resolvePlotLeftMargin, decorateAxisLabels, applyLeftGutterYAxisLabels } from "../../../utils/axis-labels.js";
-import { FD, calculateScaleLinearDomain, hexWithAlpha, appendLollipopMarkerVertical, formatCompactNumber, calculateNumTicks, seriesColor } from "../../../utils/fusedash-visual.js";
-import { collectLabels } from "../lib/domain.js";
+import { FD, formatCompactNumber, hexWithAlpha, appendLollipopMarkerVertical, calculateNumTicks, seriesColor } from "../../../utils/fusedash-visual.js";
+import { collectLabels, collectLollipopValueDomain, stackSegments } from "../lib/domain.js";
+import { lollipopHorizontalMinSpan } from "../lib/layout.js";
 function resolveColor(series, index, theme) {
   if (series.color) return series.color;
   if (index === 0 && theme.primary) return theme.primary;
@@ -18,11 +19,13 @@ function renderLollipopChart(container, options) {
     margin = { ...FD.lollipopMargin },
     theme,
     orientation = "vertical",
+    layout = "grouped",
     marker = "rhombus",
     showGrid = true,
     labelHint,
     xLabel,
     yLabel,
+    xAxisContainer = null,
     onPointHover,
     onPointLeave,
     onAxisLabelHover,
@@ -33,31 +36,42 @@ function renderLollipopChart(container, options) {
     onAxisLabelLeave
   };
   container.replaceChildren();
+  xAxisContainer == null ? void 0 : xAxisContainer.replaceChildren();
   if (!series.length || width <= 0 || height <= 0) return;
   const labels = collectLabels(series, labelHint);
   const vertical = orientation === "vertical";
+  const stacked = layout === "stacked" && series.length > 1;
   const m = {
     top: margin.top,
     bottom: margin.bottom,
     left: resolvePlotLeftMargin(margin.left),
     right: Math.max(margin.right, 12)
   };
+  const fixedBottomAxis = !vertical && !!xAxisContainer;
   const plotTop = m.top;
-  const plotBottom = height - m.bottom;
   const plotLeft = m.left;
   const plotRight = width - m.right;
-  if (plotRight - plotLeft < 8 || plotBottom - plotTop < 8) return;
-  const allV = [];
-  for (const s of series) {
-    for (const p of s.points) {
-      if (Number.isFinite(p.value)) allV.push(p.value);
-    }
+  const bottomGutter = vertical || !fixedBottomAxis ? m.bottom : 0;
+  const minSpan = vertical ? 0 : lollipopHorizontalMinSpan(labels.length, series.length);
+  const plotHAvail = height - plotTop - bottomGutter;
+  const plotH = vertical ? plotHAvail : Math.max(plotHAvail, minSpan);
+  const plotBottom = plotTop + plotH;
+  const svgH = vertical ? height : plotTop + plotH + (fixedBottomAxis ? 0 : bottomGutter);
+  if (plotRight - plotLeft < 8 || plotH < 8) return;
+  if (!vertical) {
+    container.style.height = `${svgH}px`;
+    container.style.minHeight = `${svgH}px`;
+  } else {
+    container.style.height = "";
+    container.style.minHeight = "";
   }
-  const [minV, maxV] = calculateScaleLinearDomain(allV);
-  const domainMin = minV * 1.2;
-  const domainMax = maxV === 0 && minV === 0 ? 1 : maxV * 1.2;
-  const numTicks = calculateNumTicks(height);
-  const svg = select(container).append("svg").attr("width", width).attr("height", height).attr("role", "img").attr("aria-label", "Lollipop chart").style("display", "block").style("font-family", theme.fontFamily);
+  const [domainMin, domainMax] = collectLollipopValueDomain(
+    series,
+    stacked ? "stacked" : "grouped",
+    labelHint
+  );
+  const numTicks = calculateNumTicks(vertical ? height : width);
+  const svg = select(container).append("svg").attr("width", width).attr("height", svgH).attr("role", "img").attr("aria-label", "Lollipop chart").style("display", "block").style("font-family", theme.fontFamily);
   const root = svg.append("g").attr("class", "plot");
   if (vertical) {
     const xScale = scaleBand().domain(labels).range([plotLeft, plotRight]).padding(0);
@@ -77,36 +91,52 @@ function renderLollipopChart(container, options) {
       grid.append("line").attr("x1", plotLeft).attr("x2", plotRight).attr("y1", yScale(0)).attr("y2", yScale(0)).attr("stroke", FD.gridStroke).attr("shape-rendering", "crispEdges");
     }
     const zeroY = yScale(0);
-    series.forEach((s, si) => {
-      const color = resolveColor(s, si, theme);
-      const layer = root.append("g").attr("class", `series series-${s.id}`);
-      const offset = series.length > 1 ? (si - (series.length - 1) / 2) * xScale.bandwidth() / Math.max(series.length, 1) : 0;
-      s.points.forEach((p) => {
-        if (xScale(p.label) == null || !Number.isFinite(p.value)) return;
-        const cx = (xScale(p.label) ?? 0) + xScale.bandwidth() / 2 + offset;
-        const cy = yScale(p.value);
-        const markerColor = p.color ?? color;
-        const g = layer.append("g").attr("class", "lollipop").style("cursor", onPointHover ? "pointer" : "default");
-        g.append("line").attr("class", "stem").attr("x1", cx).attr("x2", cx).attr("y1", cy + 2).attr("y2", zeroY).attr("stroke", hexWithAlpha(markerColor, FD.lollipopStemAlphaPct)).attr("stroke-width", FD.lollipopStemWidth);
-        appendLollipopMarkerVertical(g, {
-          shape: marker,
-          color: markerColor,
-          cx,
-          cy
+    const bindHover = (g, s, p) => {
+      if (!onPointHover) return;
+      g.on("mouseenter", (event) => {
+        onPointHover({
+          seriesId: s.id,
+          seriesName: s.name ?? s.id,
+          point: p,
+          event
         });
-        g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 12).attr("fill", "transparent");
-        if (onPointHover) {
-          g.on("mouseenter", (event) => {
-            onPointHover({
-              seriesId: s.id,
-              seriesName: s.name ?? s.id,
-              point: p,
-              event
-            });
-          }).on("mouseleave", () => onPointLeave == null ? void 0 : onPointLeave());
+      }).on("mouseleave", () => onPointLeave == null ? void 0 : onPointLeave());
+    };
+    const drawVerticalMark = (s, si, p, cx, cyTip, cyBase) => {
+      const color = p.color ?? resolveColor(s, si, theme);
+      const layer = root.append("g").attr("class", `series series-${s.id}`);
+      const g = layer.append("g").attr("class", "lollipop").style("cursor", onPointHover ? "pointer" : "default");
+      g.append("line").attr("class", "stem").attr("x1", cx).attr("x2", cx).attr("y1", cyTip + 2).attr("y2", cyBase).attr("stroke", hexWithAlpha(color, FD.lollipopStemAlphaPct)).attr("stroke-width", FD.lollipopStemWidth);
+      appendLollipopMarkerVertical(g, { shape: marker, color, cx, cy: cyTip });
+      g.append("circle").attr("cx", cx).attr("cy", cyTip).attr("r", 12).attr("fill", "transparent");
+      bindHover(g, s, p);
+    };
+    if (stacked) {
+      for (const label of labels) {
+        const bx = xScale(label);
+        if (bx == null) continue;
+        const cx = bx + xScale.bandwidth() / 2;
+        for (const seg of stackSegments(series, label)) {
+          drawVerticalMark(
+            seg.series,
+            seg.seriesIndex,
+            { label, value: seg.value, color: seg.series.color },
+            cx,
+            yScale(seg.end),
+            yScale(seg.start)
+          );
         }
+      }
+    } else {
+      series.forEach((s, si) => {
+        const offset = series.length > 1 ? (si - (series.length - 1) / 2) * xScale.bandwidth() / Math.max(series.length, 1) : 0;
+        s.points.forEach((p) => {
+          if (xScale(p.label) == null || !Number.isFinite(p.value)) return;
+          const cx = (xScale(p.label) ?? 0) + xScale.bandwidth() / 2 + offset;
+          drawVerticalMark(s, si, p, cx, yScale(p.value), zeroY);
+        });
       });
-    });
+    }
     const xAxis = root.append("g").attr("class", "x-axis").attr("transform", `translate(0,${plotBottom})`).call(axisBottom(xScale).tickSize(0).tickPadding(8));
     xAxis.select(".domain").attr("stroke", FD.axisStroke);
     xAxis.selectAll("line").attr("stroke", "none");
@@ -133,7 +163,7 @@ function renderLollipopChart(container, options) {
     yAxis.selectAll("line").attr("stroke", FD.axisStroke).attr("stroke-dasharray", "1 2");
     applyLeftGutterYAxisLabels(yAxis, plotLeft);
   } else {
-    const yScale = scaleBand().domain(labels).range([plotTop, plotBottom]).padding(0.2);
+    const yScale = scaleBand().domain(labels).range([plotTop, plotBottom]).padding(0);
     const xScale = scaleLinear().domain([domainMin, domainMax]).nice().range([plotLeft, plotRight]);
     const xTicks = xScale.ticks(numTicks);
     if (showGrid) {
@@ -144,58 +174,99 @@ function renderLollipopChart(container, options) {
       grid.append("line").attr("x1", xScale(0)).attr("x2", xScale(0)).attr("y1", plotTop).attr("y2", plotBottom).attr("stroke", FD.gridStroke).attr("shape-rendering", "crispEdges");
     }
     const zeroX = xScale(0);
-    series.forEach((s, si) => {
-      const color = resolveColor(s, si, theme);
-      const layer = root.append("g").attr("class", `series series-${s.id}`);
-      const offset = series.length > 1 ? (si - (series.length - 1) / 2) * yScale.bandwidth() / Math.max(series.length, 1) : 0;
-      s.points.forEach((p) => {
-        if (yScale(p.label) == null || !Number.isFinite(p.value)) return;
-        const cy = (yScale(p.label) ?? 0) + yScale.bandwidth() / 2 + offset;
-        const cx = xScale(p.value);
-        const markerColor = p.color ?? color;
-        const g = layer.append("g").style("cursor", onPointHover ? "pointer" : "default");
-        g.append("line").attr("x1", zeroX).attr("x2", cx - 2).attr("y1", cy).attr("y2", cy).attr("stroke", hexWithAlpha(markerColor, FD.lollipopStemAlphaPct)).attr("stroke-width", FD.lollipopStemWidth);
-        appendLollipopMarkerVertical(g, {
-          shape: marker,
-          color: markerColor,
-          cx,
-          cy
+    const bindHoverH = (g, s, p) => {
+      if (!onPointHover) return;
+      g.on("mouseenter", (event) => {
+        onPointHover({
+          seriesId: s.id,
+          seriesName: s.name ?? s.id,
+          point: p,
+          event
         });
-        if (onPointHover) {
-          g.on("mouseenter", (event) => {
-            onPointHover({
-              seriesId: s.id,
-              seriesName: s.name ?? s.id,
-              point: p,
-              event
-            });
-          }).on("mouseleave", () => onPointLeave == null ? void 0 : onPointLeave());
+      }).on("mouseleave", () => onPointLeave == null ? void 0 : onPointLeave());
+    };
+    const drawHorizontalMark = (s, si, p, cy, xTip, xBase) => {
+      const color = p.color ?? resolveColor(s, si, theme);
+      const layer = root.append("g").attr("class", `series series-${s.id}`);
+      const g = layer.append("g").style("cursor", onPointHover ? "pointer" : "default");
+      const x1 = Math.min(xBase, xTip);
+      const x2 = Math.max(xBase, xTip);
+      g.append("line").attr("x1", x1).attr("x2", x2).attr("y1", cy).attr("y2", cy).attr("stroke", hexWithAlpha(color, FD.lollipopStemAlphaPct)).attr("stroke-width", FD.lollipopStemWidth);
+      appendLollipopMarkerVertical(g, { shape: marker, color, cx: xTip, cy });
+      bindHoverH(g, s, p);
+    };
+    if (stacked) {
+      for (const label of labels) {
+        const by = yScale(label);
+        if (by == null) continue;
+        const cy = by + yScale.bandwidth() / 2;
+        for (const seg of stackSegments(series, label)) {
+          drawHorizontalMark(
+            seg.series,
+            seg.seriesIndex,
+            { label, value: seg.value, color: seg.series.color },
+            cy,
+            xScale(seg.end),
+            xScale(seg.start)
+          );
         }
+      }
+    } else {
+      series.forEach((s, si) => {
+        const color = resolveColor(s, si, theme);
+        const layer = root.append("g").attr("class", `series series-${s.id}`);
+        const offset = series.length > 1 ? (si - (series.length - 1) / 2) * yScale.bandwidth() / Math.max(series.length, 1) : 0;
+        s.points.forEach((p) => {
+          if (yScale(p.label) == null || !Number.isFinite(p.value)) return;
+          const cy = (yScale(p.label) ?? 0) + yScale.bandwidth() / 2 + offset;
+          const cx = xScale(p.value);
+          const markerColor = p.color ?? color;
+          const g = layer.append("g").style("cursor", onPointHover ? "pointer" : "default");
+          g.append("line").attr("x1", zeroX).attr("x2", p.value >= 0 ? cx - 2 : cx).attr("y1", cy).attr("y2", cy).attr("stroke", hexWithAlpha(markerColor, FD.lollipopStemAlphaPct)).attr("stroke-width", FD.lollipopStemWidth);
+          appendLollipopMarkerVertical(g, {
+            shape: marker,
+            color: markerColor,
+            cx,
+            cy
+          });
+          bindHoverH(g, s, p);
+        });
       });
-    });
+    }
     const yAxis = root.append("g").attr("transform", `translate(${plotLeft},0)`).call(axisLeft(yScale).tickSize(0).tickPadding(8));
     yAxis.select(".domain").attr("stroke", FD.axisStroke);
     yAxis.selectAll("line").attr("stroke", "none");
     applyLeftGutterYAxisLabels(yAxis, plotLeft, axisLabels);
-    const xAxis = root.append("g").attr("transform", `translate(0,${plotBottom})`).call(
-      axisBottom(xScale).tickValues(xTicks).tickSize(5).tickPadding(6).tickFormat((d) => {
-        const n = Number(d);
-        const decimals = Number.isInteger(n) && Math.abs(n) < 1e3 ? 0 : 2;
-        return formatCompactNumber(n, decimals);
-      })
-    );
-    xAxis.select(".domain").attr("stroke", FD.axisStroke);
-    xAxis.selectAll("text").attr("fill", FD.axisLabelFill).attr("font-size", FD.axisLabelSize).attr("text-anchor", "middle");
-    const xTickNodes = xAxis.selectAll("text").nodes();
-    if (xTickNodes.length > 0) {
-      select(xTickNodes[0]).attr("text-anchor", "start");
-      if (xTickNodes.length > 1) {
-        select(xTickNodes[xTickNodes.length - 1]).attr("text-anchor", "end");
+    const renderValueAxis = (target, y) => {
+      const xAxis = target.append("g").attr("class", "value-axis").attr("transform", `translate(0,${y})`).call(
+        axisBottom(xScale).tickValues(xTicks).tickSize(5).tickPadding(6).tickFormat((d) => {
+          const n = Number(d);
+          const decimals = Number.isInteger(n) && Math.abs(n) < 1e3 ? 0 : 2;
+          return formatCompactNumber(n, decimals);
+        })
+      );
+      xAxis.select(".domain").attr("stroke", FD.axisStroke);
+      xAxis.selectAll("text").attr("fill", FD.axisLabelFill).attr("font-size", FD.axisLabelSize).attr("text-anchor", "middle");
+      const xTickNodes = xAxis.selectAll("text").nodes();
+      if (xTickNodes.length > 0) {
+        select(xTickNodes[0]).attr("text-anchor", "start");
+        if (xTickNodes.length > 1) {
+          select(xTickNodes[xTickNodes.length - 1]).attr("text-anchor", "end");
+        }
+      }
+    };
+    if (fixedBottomAxis && xAxisContainer) {
+      const axisSvg = select(xAxisContainer).append("svg").attr("width", width).attr("height", m.bottom).attr("role", "presentation").style("display", "block").style("font-family", theme.fontFamily);
+      renderValueAxis(axisSvg.append("g"), 1);
+      if (xLabel) {
+        axisSvg.append("text").attr("x", (plotLeft + plotRight) / 2).attr("y", m.bottom - 2).attr("text-anchor", "middle").attr("fill", FD.axisLabelFill).attr("font-size", FD.axisLabelSize).text(xLabel);
       }
+    } else {
+      renderValueAxis(root, plotBottom);
     }
   }
-  if (xLabel) {
-    root.append("text").attr("x", (plotLeft + plotRight) / 2).attr("y", height - 2).attr("text-anchor", "middle").attr("fill", FD.axisLabelFill).attr("font-size", FD.axisLabelSize).text(xLabel);
+  if (xLabel && !fixedBottomAxis) {
+    root.append("text").attr("x", (plotLeft + plotRight) / 2).attr("y", svgH - 2).attr("text-anchor", "middle").attr("fill", FD.axisLabelFill).attr("font-size", FD.axisLabelSize).text(xLabel);
   }
   if (yLabel) {
     root.append("text").attr("x", 4).attr("y", 11).attr("text-anchor", "start").attr("fill", FD.axisLabelFill).attr("font-size", FD.axisLabelSize).text(yLabel);