stickyflow 0.2.0 → 0.4.0

package/dist/{chunk-KFJIFHXG.js → chunk-65IVT4GK.js}

@@ -1,4 +1,4 @@
-import { isIsometricObject, sflToCanvasState, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, isometricFaces, roundedPolygonPath, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, DEFAULT_FONT, personLabelArea, wrapText, heuristicRichMeasure, isometricBounds, deriveFaceFills, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricTopFaceCenter, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, barPath, interpolateHexColorStops, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath } from './chunk-6JKNT2YC.js';
+import { isIsometricObject, sflToCanvasState, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, isometricFaces, roundedPolygonPath, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, DEFAULT_FONT, personLabelArea, wrapText, heuristicRichMeasure, isometricBounds, deriveFaceFills, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricTopFaceCenter, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath } from './chunk-BYMIYXP5.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -339,17 +339,31 @@ function lineConfig(source, p) {
     highlightLabelFormat: p.highlightLabelFormat
   };
 }
-function scatterConfig(source) {
-  return { categories: source?.categories };
+function scatterConfig(source, p) {
+  return {
+    categories: source?.categories,
+    pointSize: numOf(p.pointSize),
+    pointOpacity: numOf(p.pointOpacity),
+    pointStrokeWidth: numOf(p.pointStrokeWidth),
+    pointStrokeColor: p.pointStrokeColor
+  };
 }
-function boxplotConfig(source) {
+function boxplotConfig(source, p) {
   return {
     boxWidth: source?.boxWidth,
     orientation: source?.orientation,
     barCornerRadius: source?.barCornerRadius,
     showBoxplotPoints: source?.showBoxplotPoints,
     barBorderColor: source?.barBorderColor,
-    barBorderWidth: source?.barBorderWidth
+    barBorderWidth: source?.barBorderWidth,
+    boxWhiskerWidth: numOf(p.boxWhiskerWidth),
+    boxMedianWidth: numOf(p.boxMedianWidth),
+    boxMedianColor: p.boxMedianColor,
+    boxWhiskerColor: p.boxWhiskerColor,
+    boxCapSize: numOf(p.boxCapSize),
+    boxPointSize: numOf(p.boxPointSize),
+    boxPointOpacity: numOf(p.boxPointOpacity),
+    boxJitter: numOf(p.boxJitter)
   };
 }
 function fieldConfig(source) {
@@ -360,26 +374,48 @@ function fieldConfig(source) {
     isolines: source?.isolines
   };
 }
-function heatmapConfig(source) {
+function heatmapConfig(source, p) {
   return {
     categories: source?.categories,
     zones: source?.zones,
     cellGap: source?.cellGap,
     showValues: source?.showValues,
     squareCells: source?.squareCells,
-    barCornerRadius: source?.barCornerRadius
+    barCornerRadius: source?.barCornerRadius,
+    cellShape: p.cellShape === "circle" ? "circle" : p.cellShape === "square" ? "square" : void 0,
+    cellStrokeColor: p.cellStrokeColor,
+    cellStrokeWidth: numOf(p.cellStrokeWidth),
+    cellValueSize: numOf(p.cellValueSize),
+    cellValueColor: p.cellValueColor
   };
 }
-function hexbinConfig(source) {
-  return { hexRadius: source?.hexRadius };
+function hexbinConfig(source, p) {
+  return {
+    hexRadius: source?.hexRadius,
+    scale: decodeRamp(source?.scale),
+    hexGap: numOf(p.hexGap),
+    hexStrokeWidth: numOf(p.hexStrokeWidth),
+    hexStrokeColor: p.hexStrokeColor,
+    hexMinOpacity: numOf(p.hexMinOpacity)
+  };
 }
-function mekkoConfig(source) {
+function mekkoConfig(source, p) {
   return {
     categories: source?.categories,
     barCornerRadius: source?.barCornerRadius,
     mekkoVaryHeight: source?.mekkoVaryHeight,
     tileGradient: source?.tileGradient,
-    showColumnBackdrop: source?.showColumnBackdrop
+    showColumnBackdrop: source?.showColumnBackdrop,
+    mekkoColumnGap: numOf(p.mekkoColumnGap),
+    mekkoSegmentGap: numOf(p.mekkoSegmentGap),
+    mekkoRoundAll: p.mekkoRoundAll === void 0 ? void 0 : String(p.mekkoRoundAll) !== "false",
+    mekkoSegmentStrokeColor: p.mekkoSegmentStrokeColor,
+    mekkoSegmentStrokeWidth: numOf(p.mekkoSegmentStrokeWidth),
+    mekkoLabelSize: numOf(p.mekkoLabelSize),
+    mekkoValueSize: numOf(p.mekkoValueSize),
+    mekkoTextColor: p.mekkoTextColor,
+    showMekkoTotals: p.showMekkoTotals === void 0 ? void 0 : String(p.showMekkoTotals) !== "false",
+    mekkoValueFormat: p.mekkoValueFormat === "percent" ? "percent" : p.mekkoValueFormat === "value" ? "value" : void 0
   };
 }
 function pieConfig(source, p) {
@@ -401,57 +437,104 @@ function pieConfig(source, p) {
     pieCenterColor: p.pieCenterColor
   };
 }
-function polarAreaConfig(source) {
+function polarAreaConfig(source, p) {
   return {
     innerRadius: source?.innerRadius,
     pieCornerRadius: source?.pieCornerRadius,
-    pieSliceGap: source?.pieSliceGap
+    pieSliceGap: source?.pieSliceGap,
+    pieStartAngle: numOf(p.pieStartAngle),
+    pieStroke: p.pieStroke,
+    pieStrokeWidth: numOf(p.pieStrokeWidth),
+    polarTrackOpacity: numOf(p.polarTrackOpacity),
+    polarRings: p.polarRings === void 0 ? void 0 : String(p.polarRings) !== "false",
+    polarTrackStroke: p.polarTrackStroke,
+    polarTrackStrokeWidth: numOf(p.polarTrackStrokeWidth),
+    polarTrackDash: p.polarTrackDash,
+    polarValueSize: numOf(p.polarValueSize),
+    polarNameSize: numOf(p.polarNameSize),
+    polarValueFirst: p.polarValueFirst === void 0 ? void 0 : String(p.polarValueFirst) !== "false",
+    polarOutsideLabels: p.polarOutsideLabels === void 0 ? void 0 : String(p.polarOutsideLabels) !== "false"
+  };
+}
+function radarStyle(p) {
+  return {
+    radarStrokeWidth: numOf(p.radarStrokeWidth),
+    radarPointSize: numOf(p.radarPointSize),
+    radarTension: numOf(p.radarTension),
+    radarSpokes: p.radarSpokes === void 0 ? void 0 : String(p.radarSpokes) !== "false"
   };
 }
-function radarConfig(source) {
+function radarConfig(source, p) {
   return {
     categories: source?.categories,
-    areaOpacity: source?.areaOpacity
+    areaOpacity: source?.areaOpacity,
+    ...radarStyle(p)
   };
 }
-function radialConfig(source) {
+function radialConfig(source, p) {
   return {
     categories: source?.categories,
-    areaOpacity: source?.areaOpacity
+    areaOpacity: source?.areaOpacity,
+    ...radarStyle(p)
   };
 }
-function radialBarConfig(source) {
+function radialBarConfig(source, p) {
   return {
     ringThickness: source?.ringThickness,
-    ringGap: source?.ringGap
+    ringGap: source?.ringGap,
+    ringTrackOpacity: numOf(p.ringTrackOpacity),
+    ringCap: p.ringCap === "butt" ? "butt" : p.ringCap === "round" ? "round" : void 0,
+    ringStartAngle: numOf(p.ringStartAngle),
+    ringSweep: numOf(p.ringSweep)
   };
 }
-function sankeyConfig(source) {
+function sankeyConfig(source, p) {
   return {
     zones: source?.zones,
     barCornerRadius: source?.barCornerRadius,
     labelPosition: source?.labelPosition,
     labelOrientation: source?.labelOrientation,
     labelColor: source?.labelColor,
-    linkGradient: source?.linkGradient
+    linkGradient: source?.linkGradient,
+    sankeyNodeWidth: numOf(p.sankeyNodeWidth),
+    sankeyNodeGap: numOf(p.sankeyNodeGap),
+    sankeyLinkOpacity: numOf(p.sankeyLinkOpacity),
+    sankeyLinkCurve: numOf(p.sankeyLinkCurve),
+    sankeyLabelSize: numOf(p.sankeyLabelSize)
   };
 }
-function treemapConfig(source) {
+function treemapConfig(source, p) {
   return {
     zones: source?.zones,
     cellGap: source?.cellGap,
     barCornerRadius: source?.barCornerRadius,
     headerColor: source?.headerColor,
-    tileGradient: source?.tileGradient
+    tileGradient: source?.tileGradient,
+    tileStrokeColor: p.tileStrokeColor,
+    tileStrokeWidth: numOf(p.tileStrokeWidth),
+    tileLabelSize: numOf(p.tileLabelSize),
+    tileValueSize: numOf(p.tileValueSize),
+    tileTextColor: p.tileTextColor,
+    tileLabelPadding: numOf(p.tileLabelPadding),
+    showTileValues: p.showTileValues === void 0 ? void 0 : String(p.showTileValues) !== "false",
+    headerHeight: numOf(p.headerHeight)
   };
 }
-function customConfig(source) {
+function customConfig(source, p) {
   return {
     categories: source?.categories,
     zones: source?.zones,
     orientation: source?.orientation,
     connectPoints: source?.connectPoints,
-    reverseComparison: source?.reverseComparison
+    reverseComparison: source?.reverseComparison,
+    customConnectorWidth: numOf(p.customConnectorWidth),
+    customConnectorOpacity: numOf(p.customConnectorOpacity),
+    customConnectorDash: p.customConnectorDash,
+    customBeforeFill: p.customBeforeFill,
+    customBeforeStroke: p.customBeforeStroke,
+    customBeforeStrokeWidth: numOf(p.customBeforeStrokeWidth),
+    customLabelSize: numOf(p.customLabelSize),
+    customLabelColor: p.customLabelColor
   };
 }
 
@@ -467,33 +550,33 @@ function chartObject(e) {
     case "line":
       return typedChart(base, chartType, lineConfig(source, p));
     case "scatter":
-      return typedChart(base, chartType, scatterConfig(source));
+      return typedChart(base, chartType, scatterConfig(source, p));
     case "boxplot":
-      return typedChart(base, chartType, boxplotConfig(source));
+      return typedChart(base, chartType, boxplotConfig(source, p));
     case "field":
       return typedChart(base, chartType, fieldConfig(source));
     case "heatmap":
-      return typedChart(base, chartType, heatmapConfig(source));
+      return typedChart(base, chartType, heatmapConfig(source, p));
     case "hexbin":
-      return typedChart(base, chartType, hexbinConfig(source));
+      return typedChart(base, chartType, hexbinConfig(source, p));
     case "mekko":
-      return typedChart(base, chartType, mekkoConfig(source));
+      return typedChart(base, chartType, mekkoConfig(source, p));
     case "pie":
       return typedChart(base, chartType, pieConfig(source, p));
     case "polarArea":
-      return typedChart(base, chartType, polarAreaConfig(source));
+      return typedChart(base, chartType, polarAreaConfig(source, p));
     case "radar":
-      return typedChart(base, chartType, radarConfig(source));
+      return typedChart(base, chartType, radarConfig(source, p));
     case "radial":
-      return typedChart(base, chartType, radialConfig(source));
+      return typedChart(base, chartType, radialConfig(source, p));
     case "radialBar":
-      return typedChart(base, chartType, radialBarConfig(source));
+      return typedChart(base, chartType, radialBarConfig(source, p));
     case "sankey":
-      return typedChart(base, chartType, sankeyConfig(source));
+      return typedChart(base, chartType, sankeyConfig(source, p));
     case "treemap":
-      return typedChart(base, chartType, treemapConfig(source));
+      return typedChart(base, chartType, treemapConfig(source, p));
     case "custom":
-      return typedChart(base, chartType, customConfig(source));
+      return typedChart(base, chartType, customConfig(source, p));
   }
 }
 function typedChart(base, chartType, config) {
@@ -723,6 +806,10 @@ function variant(value) {
 function motion(value) {
   return value === "roll" || value === "fade" ? value : void 0;
 }
+function positiveNumber(value) {
+  const number = Number(value);
+  return value !== void 0 && Number.isFinite(number) && number > 0 ? number : void 0;
+}
 function fontWeight(value) {
   return value && FONT_WEIGHT.test(value) ? value : void 0;
 }
@@ -792,7 +879,7 @@ var RULER_NUMBERS = [
 ];
 var RULER_COLORS = ["color", "accent", "glow"];
 var RULER_DEFAULTS = { color: "#8f95c4", accent: "#d9f270", glow: "#3ddc84" };
-var RULER_OPTIONAL_COLORS = ["core"];
+var RULER_OPTIONAL_COLORS = ["core", "peak"];
 function rulerObject(canvasObject) {
   const properties = canvasObject.props;
   const parameters = {};
@@ -871,7 +958,8 @@ function widgetObject(canvasObject) {
       fontFamily: fontFamily(properties.fontFamily),
       variant: variant(properties.variant),
       motion: motion(properties.motion),
-      fontWeight: fontWeight(properties.fontWeight)
+      fontWeight: fontWeight(properties.fontWeight),
+      fontSize: positiveNumber(properties.fontSize)
     }
   };
 }
@@ -2443,7 +2531,8 @@ var DEFAULT_ROLLING_NUMBER_STYLE = {
   fontFamily: "'Roboto Mono', 'SFMono-Regular', Consolas, monospace",
   variant: "flip",
   motion: "roll",
-  fontWeight: "300"
+  fontWeight: "300",
+  fontSize: 0
 };
 function resolveRollingNumberStyle(style) {
   return {
@@ -2454,7 +2543,8 @@ function resolveRollingNumberStyle(style) {
     fontFamily: style.fontFamily ?? DEFAULT_ROLLING_NUMBER_STYLE.fontFamily,
     variant: style.variant ?? DEFAULT_ROLLING_NUMBER_STYLE.variant,
     motion: style.motion ?? DEFAULT_ROLLING_NUMBER_STYLE.motion,
-    fontWeight: style.fontWeight ?? DEFAULT_ROLLING_NUMBER_STYLE.fontWeight
+    fontWeight: style.fontWeight ?? DEFAULT_ROLLING_NUMBER_STYLE.fontWeight,
+    fontSize: style.fontSize ?? DEFAULT_ROLLING_NUMBER_STYLE.fontSize
   };
 }
 
@@ -4205,6 +4295,7 @@ function createBoxplotLayout(context) {
   const orientation = chart.config?.orientation ?? "vertical";
   const boxCount = Math.max(1, chart.series.length);
   const slotWidth = (orientation === "horizontal" ? plot.height : plot.width) / boxCount;
+  const borderColor = representativeColor(chart.config?.barBorderColor, "#000000");
   const widthFraction = Math.min(1, Math.max(0.05, chart.config?.boxWidth ?? 0.6));
   return {
     orientation,
@@ -4212,8 +4303,16 @@ function createBoxplotLayout(context) {
     boxWidth: Math.max(4, slotWidth * widthFraction),
     cornerRadius: chart.config?.barCornerRadius ?? 2,
     showPoints: chart.config?.showBoxplotPoints ?? true,
-    borderColor: representativeColor(chart.config?.barBorderColor, "#000000"),
-    borderWidth: finite(chart.config?.barBorderWidth, 1)
+    borderColor,
+    borderWidth: finite(chart.config?.barBorderWidth, 1),
+    whiskerWidth: Math.max(0, finite(chart.config?.boxWhiskerWidth, 1)),
+    medianWidth: Math.max(0, finite(chart.config?.boxMedianWidth, 2)),
+    medianColor: chart.config?.boxMedianColor ?? borderColor,
+    whiskerColor: chart.config?.boxWhiskerColor,
+    capSize: Math.max(0, finite(chart.config?.boxCapSize, 0.4)),
+    pointSize: Math.max(0, finite(chart.config?.boxPointSize, 3)),
+    pointOpacity: Math.min(1, Math.max(0, finite(chart.config?.boxPointOpacity, 0.7))),
+    jitter: Math.max(0, finite(chart.config?.boxJitter, 1))
   };
 }
 
@@ -4240,8 +4339,11 @@ function createBoxplotGeometry(context, layout, seriesIndex, stats) {
 function renderSamplePoints(context, layout, mark) {
   const { chart, plot, bounds, diagnostics, nextOrder } = context;
   const valueAt = (value) => layout.orientation === "horizontal" ? plot.x + mapChartValue(value, chart.axisX, plot.width) : plot.y + plot.height - mapChartValue(value, chart.axisY, plot.height);
+  if (layout.pointSize <= 0) {
+    return [];
+  }
   return mark.series.values.map((value, pointIndex) => {
-    const center = mark.geometry.center + jitter(mark.seriesIndex * 1e4 + pointIndex) * layout.boxWidth;
+    const center = mark.geometry.center + jitter(mark.seriesIndex * 1e4 + pointIndex) * layout.jitter * layout.boxWidth;
     const { x, y } = boxplotPoint(layout.orientation, center, valueAt(value));
     return {
       type: "ellipse",
@@ -4250,9 +4352,9 @@ function renderSamplePoints(context, layout, mark) {
       bounds,
       cx: x,
       cy: y,
-      rx: 3,
-      ry: 3,
-      style: { fill: paint(mark.color, diagnostics, chart.id), opacity: 0.7 }
+      rx: layout.pointSize,
+      ry: layout.pointSize,
+      style: { fill: paint(mark.color, diagnostics, chart.id), opacity: layout.pointOpacity }
     };
   });
 }
@@ -4263,22 +4365,30 @@ function jitter(seed) {
 
 // src/renderScene/charts/renderers/boxplot/shapes.ts
 function renderBoxAndWhiskers(context, layout, mark) {
+  const whiskers = layout.whiskerWidth > 0 ? [lowerWhisker(layout, mark), upperWhisker(layout, mark)] : [];
+  const caps = layout.whiskerWidth > 0 && layout.capSize > 0 ? [lowerWhiskerCap(layout, mark), upperWhiskerCap(layout, mark)] : [];
+  const median = layout.medianWidth > 0 ? [medianLine(layout, mark)] : [];
   return [
-    createBoxBorderLine(context, layout, lowerWhisker(layout, mark)),
-    createBoxBorderLine(context, layout, upperWhisker(layout, mark)),
-    createBoxBorderLine(context, layout, lowerWhiskerCap(layout, mark)),
-    createBoxBorderLine(context, layout, upperWhiskerCap(layout, mark)),
+    ...[...whiskers, ...caps].map(
+      (line) => createBoxBorderLine(context, layout, { ...line, color: whiskerColor(layout, mark) })
+    ),
     createBoxNode(context, layout, mark),
-    createBoxBorderLine(context, layout, medianLine(layout, mark))
+    ...median.map((line) => createBoxBorderLine(context, layout, line))
   ];
 }
+function whiskerColor(layout, mark) {
+  if (layout.whiskerColor === "series") {
+    return representativeColor(mark.color, layout.borderColor);
+  }
+  return layout.whiskerColor;
+}
 function lowerWhisker(layout, mark) {
   const { center, min, q1 } = mark.geometry;
   return {
     id: `chart-box-whisker-lo-${mark.id}`,
     from: boxplotPoint(layout.orientation, center, min),
     to: boxplotPoint(layout.orientation, center, q1),
-    strokeWidth: 1
+    strokeWidth: layout.whiskerWidth
   };
 }
 function upperWhisker(layout, mark) {
@@ -4287,7 +4397,7 @@ function upperWhisker(layout, mark) {
     id: `chart-box-whisker-hi-${mark.id}`,
     from: boxplotPoint(layout.orientation, center, q3),
     to: boxplotPoint(layout.orientation, center, max),
-    strokeWidth: 1
+    strokeWidth: layout.whiskerWidth
   };
 }
 function lowerWhiskerCap(layout, mark) {
@@ -4297,12 +4407,12 @@ function upperWhiskerCap(layout, mark) {
   return whiskerCap(`chart-box-cap-hi-${mark.id}`, layout, mark.geometry.center, mark.geometry.max);
 }
 function whiskerCap(id, layout, center, value) {
-  const capHalf = layout.boxWidth * 0.2;
+  const capHalf = layout.boxWidth * layout.capSize / 2;
   return {
     id,
     from: boxplotPoint(layout.orientation, center - capHalf, value),
     to: boxplotPoint(layout.orientation, center + capHalf, value),
-    strokeWidth: 1
+    strokeWidth: layout.whiskerWidth
   };
 }
 function medianLine(layout, mark) {
@@ -4311,7 +4421,8 @@ function medianLine(layout, mark) {
     id: `chart-box-median-${mark.id}`,
     from: boxplotPoint(layout.orientation, mark.geometry.center - half, mark.geometry.median),
     to: boxplotPoint(layout.orientation, mark.geometry.center + half, mark.geometry.median),
-    strokeWidth: 2
+    strokeWidth: layout.medianWidth,
+    color: layout.medianColor
   };
 }
 function createBoxBorderLine(context, layout, line) {
@@ -4323,7 +4434,7 @@ function createBoxBorderLine(context, layout, line) {
     d: `M ${line.from.x} ${line.from.y} L ${line.to.x} ${line.to.y}`,
     style: {
       fill: { kind: "none" },
-      stroke: { kind: "solid", color: layout.borderColor },
+      stroke: { kind: "solid", color: line.color ?? layout.borderColor },
       strokeWidth: line.strokeWidth
     }
   };
@@ -4503,9 +4614,9 @@ function renderConnectedPairs(context) {
         valueIndex: index,
         point: beforePoint,
         style: {
-          fill: paint(chart.gridColor ?? "#e2e8f0", context.diagnostics, chart.id),
-          stroke: { kind: "solid", color: HOLLOW_POINT_STROKE },
-          strokeWidth: 1.5
+          fill: paint(chart.config?.customBeforeFill ?? chart.gridColor ?? "#e2e8f0", context.diagnostics, chart.id),
+          stroke: { kind: "solid", color: chart.config?.customBeforeStroke ?? HOLLOW_POINT_STROKE },
+          strokeWidth: finite(chart.config?.customBeforeStrokeWidth, 1.5)
         }
       })
     );
@@ -4527,6 +4638,10 @@ function renderConnectedPairs(context) {
   }
   return nodes;
 }
+function connectorDash(text) {
+  const parts = (text ?? "").split(/[ ,]+/).map(Number).filter((part) => Number.isFinite(part) && part > 0);
+  return parts.length > 0 ? parts : void 0;
+}
 function createConnectorLine(context, index, from, to, color2) {
   const { chart } = context;
   return {
@@ -4535,7 +4650,13 @@ function createConnectorLine(context, index, from, to, color2) {
     order: context.nextOrder(),
     bounds: context.bounds,
     d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`,
-    style: { fill: { kind: "none" }, stroke: { kind: "solid", color: color2 }, strokeWidth: 2 }
+    style: {
+      fill: { kind: "none" },
+      stroke: { kind: "solid", color: color2 },
+      strokeWidth: finite(chart.config?.customConnectorWidth, 2),
+      opacity: chart.config?.customConnectorOpacity,
+      dash: connectorDash(chart.config?.customConnectorDash)
+    }
   };
 }
 function createConnectorLabel(context, index, beforePoint, afterPoint, radius, text) {
@@ -4562,7 +4683,8 @@ function createConnectorLabel(context, index, beforePoint, afterPoint, radius, t
       chart,
       align: horizontal ? "left" : "center"
     }),
-    fontSize: Math.max(9, finite(chart.fontSize, 12)) - 2
+    fontSize: Math.max(6, finite(chart.config?.customLabelSize, Math.max(9, finite(chart.fontSize, 12)) - 2)),
+    ...chart.config?.customLabelColor ? { color: chart.config.customLabelColor } : {}
   };
 }
 
@@ -4979,22 +5101,38 @@ function renderHeatmapCell(context, layout, cell) {
 }
 function createCellBackground(context, layout, cell) {
   const { chart, bounds, nextOrder } = context;
+  const id = `chart-heatmap-cell-${chart.id}-${cell.seriesId}-${cell.columnIndex}`;
+  const style = {
+    fill: { kind: "solid", color: cell.color },
+    stroke: { kind: "solid", color: chart.config?.cellStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
+    strokeWidth: finite(chart.config?.cellStrokeWidth, finite(chart.gridWidth, 1))
+  };
+  if (chart.config?.cellShape === "circle") {
+    return {
+      type: "ellipse",
+      id,
+      order: nextOrder(),
+      bounds,
+      cx: cell.frame.x + cell.frame.width / 2,
+      cy: cell.frame.y + cell.frame.height / 2,
+      rx: cell.frame.width / 2,
+      ry: cell.frame.height / 2,
+      style
+    };
+  }
   return {
     type: "rect",
-    id: `chart-heatmap-cell-${chart.id}-${cell.seriesId}-${cell.columnIndex}`,
+    id,
     order: nextOrder(),
     bounds,
     ...cell.frame,
     rx: layout.grid.cellRadius,
-    style: {
-      fill: { kind: "solid", color: cell.color },
-      stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
-      strokeWidth: finite(chart.gridWidth, 1)
-    }
+    style
   };
 }
 function createCellValueLabel(context, layout, cell) {
   const { chart, bounds, nextOrder } = context;
+  const size = Math.max(6, finite(chart.config?.cellValueSize, layout.fontSize));
   return {
     ...chartText({
       id: `chart-heatmap-value-${chart.id}-${cell.seriesId}-${cell.columnIndex}`,
@@ -5002,15 +5140,16 @@ function createCellValueLabel(context, layout, cell) {
       bounds,
       frame: {
         x: cell.frame.x,
-        y: cell.frame.y + cell.frame.height / 2 - layout.fontSize / 2,
+        y: cell.frame.y + cell.frame.height / 2 - size / 2,
         width: cell.frame.width,
-        height: layout.fontSize + 2
+        height: size + 2
       },
       text: String(cell.value),
       chart,
       align: "center"
     }),
-    color: contrastTextColor(cell.color)
+    ...chart.config?.cellValueSize === void 0 ? {} : { fontSize: size },
+    color: chart.config?.cellValueColor ?? contrastTextColor(cell.color)
   };
 }
 
@@ -5273,6 +5412,10 @@ function groupSankeyColumns(ids, columns) {
   return groups;
 }
 
+// src/renderScene/charts/geometry/sankey/constants.ts
+var SANKEY_NODE_WIDTH = 18;
+var SANKEY_NODE_GAP = 8;
+
 // src/renderScene/charts/geometry/sankey/graph.ts
 function createSankeyGraph(nodes, links) {
   const ids = new Set(nodes.map((node) => node.id));
@@ -5296,10 +5439,6 @@ function createSankeyGraph(nodes, links) {
   return { ids, links: validLinks, incoming, outgoing };
 }
 
-// src/renderScene/charts/geometry/sankey/constants.ts
-var SANKEY_NODE_WIDTH = 18;
-var SANKEY_NODE_GAP = 8;
-
 // src/renderScene/charts/geometry/sankey/nodeGeometry.ts
 function nodeValues(graph) {
   const values = /* @__PURE__ */ new Map();
@@ -5310,11 +5449,11 @@ function nodeValues(graph) {
   }
   return values;
 }
-function calculateValueScale(groups, values, height) {
+function calculateValueScale(groups, values, height, nodeGap) {
   let scale = Infinity;
   for (const ids of groups.values()) {
     const total = ids.reduce((sum, id) => sum + (values.get(id) ?? 0), 0);
-    const gaps = Math.max(0, ids.length - 1) * SANKEY_NODE_GAP;
+    const gaps = Math.max(0, ids.length - 1) * nodeGap;
     const usable = Math.max(1, height - gaps);
     if (total > 0) {
       scale = Math.min(scale, usable / total);
@@ -5325,16 +5464,16 @@ function calculateValueScale(groups, values, height) {
   }
   return scale;
 }
-function sankeyNodeX(column, columnCount, width) {
+function sankeyNodeX(column, columnCount, width, nodeWidth = SANKEY_NODE_WIDTH) {
   if (columnCount <= 1) {
     return 0;
   }
-  return column * (width - SANKEY_NODE_WIDTH) / (columnCount - 1);
+  return column * (width - nodeWidth) / (columnCount - 1);
 }
-function calculateNodeGeometry(graph, columns, height) {
+function calculateNodeGeometry(graph, columns, height, nodeGap = SANKEY_NODE_GAP) {
   const groups = groupSankeyColumns(graph.ids, columns);
   const values = nodeValues(graph);
-  const valueScale = calculateValueScale(groups, values, height);
+  const valueScale = calculateValueScale(groups, values, height, nodeGap);
   const y = /* @__PURE__ */ new Map();
   const heights = /* @__PURE__ */ new Map();
   for (const ids of groups.values()) {
@@ -5343,7 +5482,7 @@ function calculateNodeGeometry(graph, columns, height) {
       const nodeHeight = Math.max(2, (values.get(id) ?? 0) * valueScale);
       y.set(id, cursor);
       heights.set(id, nodeHeight);
-      cursor += nodeHeight + SANKEY_NODE_GAP;
+      cursor += nodeHeight + nodeGap;
     }
   }
   return {
@@ -5356,7 +5495,7 @@ function calculateNodeGeometry(graph, columns, height) {
 }
 
 // src/renderScene/charts/geometry/sankey/links.ts
-function layoutSankeyLinks(graph, geometry, width, offsets) {
+function layoutSankeyLinks(graph, geometry, width, offsets, nodeWidth = SANKEY_NODE_WIDTH) {
   const outgoingOffsets = /* @__PURE__ */ new Map();
   const incomingOffsets = /* @__PURE__ */ new Map();
   for (const id of graph.ids) {
@@ -5378,8 +5517,8 @@ function layoutSankeyLinks(graph, geometry, width, offsets) {
       target: link.target,
       value: link.value,
       color: link.color,
-      x0: sankeyNodeX(geometry.columns.get(link.source) ?? 0, geometry.columnCount, width) + SANKEY_NODE_WIDTH + (sourceOffset?.x ?? 0),
-      x1: sankeyNodeX(geometry.columns.get(link.target) ?? 0, geometry.columnCount, width) + (targetOffset?.x ?? 0),
+      x0: sankeyNodeX(geometry.columns.get(link.source) ?? 0, geometry.columnCount, width, nodeWidth) + nodeWidth + (sourceOffset?.x ?? 0),
+      x1: sankeyNodeX(geometry.columns.get(link.target) ?? 0, geometry.columnCount, width, nodeWidth) + (targetOffset?.x ?? 0),
       sourceY0: sourceTop + sourceSlice,
       sourceY1: sourceTop + sourceSlice + sliceHeight,
       targetY0: targetTop + targetSlice,
@@ -5389,7 +5528,7 @@ function layoutSankeyLinks(graph, geometry, width, offsets) {
 }
 
 // src/renderScene/charts/geometry/sankey/nodes.ts
-function layoutSankeyNodes(inputs, graph, geometry, width, offsets) {
+function layoutSankeyNodes(inputs, graph, geometry, width, offsets, nodeWidth = SANKEY_NODE_WIDTH) {
   return [...graph.ids].map((id) => {
     const input = inputs.find((node) => node.id === id);
     const column = geometry.columns.get(id) ?? 0;
@@ -5398,9 +5537,9 @@ function layoutSankeyNodes(inputs, graph, geometry, width, offsets) {
       id,
       label: input?.label ?? id,
       color: input?.color,
-      x: sankeyNodeX(column, geometry.columnCount, width) + (offset?.x ?? 0),
+      x: sankeyNodeX(column, geometry.columnCount, width, nodeWidth) + (offset?.x ?? 0),
       y: (geometry.y.get(id) ?? 0) + (offset?.y ?? 0),
-      width: SANKEY_NODE_WIDTH,
+      width: nodeWidth,
       height: geometry.heights.get(id) ?? 2,
       column
     };
@@ -5417,17 +5556,17 @@ function collectOffsets(inputs) {
   }
   return offsets;
 }
-function layoutSankey(nodeInputs, linkInputs, width, height) {
+function layoutSankey(nodeInputs, linkInputs, width, height, options = { nodeWidth: SANKEY_NODE_WIDTH, nodeGap: SANKEY_NODE_GAP }) {
   const graph = createSankeyGraph(nodeInputs, linkInputs);
   if (graph.ids.size === 0) {
     return { nodes: [], links: [] };
   }
   const columns = assignSankeyColumns(graph);
-  const geometry = calculateNodeGeometry(graph, columns, height);
+  const geometry = calculateNodeGeometry(graph, columns, height, options.nodeGap);
   const offsets = collectOffsets(nodeInputs);
   return {
-    nodes: layoutSankeyNodes(nodeInputs, graph, geometry, width, offsets),
-    links: layoutSankeyLinks(graph, geometry, width, offsets)
+    nodes: layoutSankeyNodes(nodeInputs, graph, geometry, width, offsets, options.nodeWidth),
+    links: layoutSankeyLinks(graph, geometry, width, offsets, options.nodeWidth)
   };
 }
 
@@ -5529,6 +5668,8 @@ function placeHorizontalTreemapRow(row, bounds) {
 }
 
 // src/renderScene/charts/renderers/hexbin.ts
+var DEFAULT_MIN_OPACITY = 0.15;
+var GAP_TO_RADIUS = 1 / Math.sqrt(3);
 function hexPath(cx, cy, radius) {
   const points = [];
   for (let corner = 0; corner < 6; corner++) {
@@ -5540,7 +5681,11 @@ function hexPath(cx, cy, radius) {
 function renderHexbin(context) {
   const { chart, plot, bounds, diagnostics, nextOrder } = context;
   const nodes = [];
-  const hexRadius = Math.max(1, chart.config?.hexRadius ?? DEFAULT_HEX_RADIUS);
+  const config = chart.config;
+  const hexRadius = Math.max(1, config?.hexRadius ?? DEFAULT_HEX_RADIUS);
+  const drawRadius = Math.max(0.5, hexRadius - Math.max(0, config?.hexGap ?? 0) * GAP_TO_RADIUS);
+  const strokeWidth = config?.hexStrokeWidth ?? 0;
+  const minOpacity = Math.min(1, Math.max(0, config?.hexMinOpacity ?? DEFAULT_MIN_OPACITY));
   const shadow = resolveChartShadow(chart.shadowStyle);
   const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
   chart.series.forEach((series, seriesIndex) => {
@@ -5553,16 +5698,21 @@ function renderHexbin(context) {
     const bins = computeHexBins(pixelPoints2, hexRadius);
     const maxCount = Math.max(1, ...bins.map((bin) => bin.count));
     const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
+    const ramp = config?.scale;
     bins.forEach((bin, i) => {
+      const share = bin.count / maxCount;
+      const fill2 = ramp ? colorAtRamp(ramp, share) : color2;
       nodes.push({
         type: "path",
         id: `chart-hexbin-${chart.id}-${series.id}-${i}`,
         order: nextOrder(),
         bounds,
-        d: hexPath(plot.x + bin.cx, plot.y + bin.cy, hexRadius),
+        d: hexPath(plot.x + bin.cx, plot.y + bin.cy, drawRadius),
         style: {
-          fill: paint(color2, diagnostics, chart.id),
-          opacity: Math.max(0.15, bin.count / maxCount),
+          fill: paint(fill2, diagnostics, chart.id),
+          stroke: strokeWidth > 0 ? paint(config?.hexStrokeColor ?? fill2, diagnostics, chart.id) : void 0,
+          strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
+          opacity: ramp ? void 0 : Math.max(minOpacity, share),
           shadow,
           clip: clipPath ? { type: "path", d: clipPath } : void 0
         }
@@ -5919,10 +6069,8 @@ function renderMekkoColumnLabels(context, layout, columnIndex, column) {
   if (!context.showLabels) {
     return [];
   }
-  return [
-    createTotalLabel(context, layout, columnIndex, column),
-    createColumnLabel(context, layout, columnIndex, column)
-  ];
+  const columnLabel = createColumnLabel(context, layout, columnIndex, column);
+  return context.chart.config?.showMekkoTotals === false ? [columnLabel] : [createTotalLabel(context, layout, columnIndex, column), columnLabel];
 }
 function createTotalLabel(context, layout, columnIndex, column) {
   const { chart, plot, bounds, nextOrder } = context;
@@ -5968,17 +6116,21 @@ function createColumnLabel(context, layout, columnIndex, column) {
 }
 
 // src/renderScene/charts/renderers/mekko/layout.ts
-var COLUMN_GAP = 4;
 function createMekkoLayout(context) {
   const labels = mekkoColumnLabels(context);
   const labelGutterWidth = context.showLabels ? 30 : 0;
   const grid = createMekkoGrid(context, labelGutterWidth);
   const fontSize = Math.max(9, finite(context.chart.fontSize, 12));
+  const columnGap = Math.max(0, finite(context.chart.config?.mekkoColumnGap, 4));
+  const smallFontSize = Math.max(8, fontSize - 1);
   return {
-    columns: createMekkoColumns(context, grid, labels),
+    columns: createMekkoColumns(context, grid, labels, columnGap),
     fontSize,
-    smallFontSize: Math.max(8, fontSize - 1),
+    smallFontSize,
     labelGutterWidth,
+    columnGap,
+    labelSize: Math.max(6, finite(context.chart.config?.mekkoLabelSize, smallFontSize)),
+    valueSize: Math.max(6, finite(context.chart.config?.mekkoValueSize, smallFontSize)),
     grid
   };
 }
@@ -5996,20 +6148,20 @@ function createMekkoGrid(context, labelGutterWidth) {
     height: Math.max(1, context.plot.height - topGutter - bottomGutter)
   };
 }
-function createMekkoColumns(context, grid, labels) {
+function createMekkoColumns(context, grid, labels, columnGap) {
   const totals = labels.map(
     (_, columnIndex) => context.chart.series.reduce((sum, series) => sum + (series.values[columnIndex] ?? 0), 0)
   );
   const grandTotal = totals.reduce((sum, total) => sum + total, 0);
   const maximumTotal = Math.max(1, ...totals);
-  const availableWidth = Math.max(1, grid.width - COLUMN_GAP * Math.max(0, labels.length - 1));
+  const availableWidth = Math.max(1, grid.width - columnGap * Math.max(0, labels.length - 1));
   let nextX = grid.x;
   return labels.map((label, index) => {
     const total = totals[index];
     const width = grandTotal > 0 ? total / grandTotal * availableWidth : availableWidth / labels.length;
     const height = context.chart.config?.mekkoVaryHeight ? grid.height * (total / maximumTotal) : grid.height;
     const column = { label, total, x: nextX, y: grid.y + grid.height - height, width, height };
-    nextX += width + COLUMN_GAP;
+    nextX += width + columnGap;
     return column;
   });
 }
@@ -6076,8 +6228,10 @@ function createSegmentNode(context, segment, nextColor) {
   const { chart, plot, bounds, diagnostics, nextOrder } = context;
   const shadow = resolveChartShadow(chart.shadowStyle);
   const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
-  const radius = segment.isTop ? mekkoCornerRadius(context) : 0;
+  const config = chart.config;
+  const radius = segment.isTop || config?.mekkoRoundAll ? mekkoCornerRadius(context) : 0;
   const { x, y, width, height } = segment.frame;
+  const segmentGap = Math.max(0, finite(config?.mekkoSegmentGap, 0));
   const fallback = "#94a3b8";
   const gradientBounds = {
     minX: x + width / 2 - height / 2,
@@ -6098,11 +6252,11 @@ function createSegmentNode(context, segment, nextColor) {
     id: `chart-mekko-seg-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
     order: nextOrder(),
     bounds: nextColor ? gradientBounds : bounds,
-    d: barShapePath(x, y, width, height, radius),
+    d: barPath(x, y + segmentGap / 2, width, Math.max(0, height - segmentGap), radius, Boolean(config?.mekkoRoundAll)),
     style: {
       fill: fill2,
-      stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
-      strokeWidth: finite(chart.gridWidth, 1),
+      stroke: { kind: "solid", color: config?.mekkoSegmentStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
+      strokeWidth: finite(config?.mekkoSegmentStrokeWidth, finite(chart.gridWidth, 1)),
       shadow,
       clip: clipPath ? { type: "path", d: clipPath } : void 0
     }
@@ -6116,12 +6270,17 @@ function createSegmentLabel(context, layout, segment) {
   }
   const innerWidth = Math.max(1, width - 8);
   const innerHeight = Math.max(1, height - 6);
-  const lineHeight = layout.smallFontSize * 1.2;
-  const labelLines = wrapText(segment.seriesLabel, innerWidth, layout.smallFontSize);
-  if ((labelLines.length + 1) * lineHeight > innerHeight) {
+  const lineHeight = layout.labelSize * 1.2;
+  const valueHeight = layout.valueSize * 1.2;
+  const labelLines = wrapText(segment.seriesLabel, innerWidth, layout.labelSize).map(
+    (line) => ellipsizeToWidth(line, innerWidth, layout.labelSize, true)
+  );
+  if (labelLines.length * lineHeight + valueHeight > innerHeight) {
     return [];
   }
-  const textColor = contrastTextColor(representativeColor(segment.color, "#ffffff"));
+  const textColor = chart.config?.mekkoTextColor ?? contrastTextColor(representativeColor(segment.color, "#ffffff"));
+  const columnTotal = layout.columns[segment.columnIndex]?.total ?? 0;
+  const valueText = chart.config?.mekkoValueFormat === "percent" ? `${columnTotal > 0 ? Math.round(segment.value / columnTotal * 100) : 0}%` : String(segment.value);
   const label = {
     ...chartText({
       id: `chart-mekko-seg-label-${chart.id}-${segment.columnIndex}-${segment.seriesId}`,
@@ -6132,7 +6291,7 @@ function createSegmentLabel(context, layout, segment) {
       chart
     }),
     lines: labelLines,
-    fontSize: layout.smallFontSize,
+    fontSize: layout.labelSize,
     fontWeight: "bold",
     color: textColor
   };
@@ -6147,11 +6306,11 @@ function createSegmentLabel(context, layout, segment) {
         width: innerWidth,
         height: Math.max(1, innerHeight - labelLines.length * lineHeight)
       },
-      text: String(segment.value),
+      text: valueText,
       chart
     }),
-    lines: [String(segment.value)],
-    fontSize: layout.smallFontSize,
+    lines: [valueText],
+    fontSize: layout.valueSize,
     color: textColor
   };
   return [label, valueNode];
@@ -6366,7 +6525,7 @@ function renderPie(context) {
 }
 
 // src/renderScene/charts/renderers/polarArea.ts
-var START_ANGLE = -Math.PI / 2;
+var TOP2 = -Math.PI / 2;
 var TRACK_COLOR_FALLBACK = "#e2e8f0";
 var MIN_LABEL_SWEEP = 14 * Math.PI / 180;
 var LABEL_WIDTH = 80;
@@ -6388,7 +6547,8 @@ function layoutOf(context) {
     gapPx: Math.max(0, finite(chart.config?.pieSliceGap, 0)),
     axisMin,
     range: finite(chart.axisY.max, 100) - axisMin,
-    sweep: chart.series.length > 0 ? Math.PI * 2 / chart.series.length : 0
+    sweep: chart.series.length > 0 ? Math.PI * 2 / chart.series.length : 0,
+    start: TOP2 + finite(chart.config?.pieStartAngle, 0) * Math.PI / 180
   };
 }
 function clampedCorner(layout, outerRadius, angles) {
@@ -6420,7 +6580,11 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
     order: nextOrder(),
     bounds,
     d: trackPath,
-    style: { fill: paint(chart.gridColor ?? TRACK_COLOR_FALLBACK, diagnostics, chart.id) }
+    style: {
+      fill: paint(chart.gridColor ?? TRACK_COLOR_FALLBACK, diagnostics, chart.id),
+      opacity: chart.config?.polarTrackOpacity,
+      ...trackStroke(context)
+    }
   };
   const wedgePath = createPieSlicePath(
     { centerX, centerY, outerRadius, innerRadius },
@@ -6452,16 +6616,63 @@ function wedgeNodes(context, layout, series, angles, outerRadius, value, rawColo
       pieValue: value
     },
     prop: seriesValueProp(series.id, 0),
-    style: { fill: color2, innerShadow: shadow }
+    style: { fill: color2, innerShadow: shadow, ...wedgeStroke(context) }
   };
   return shadowCaster ? [track, shadowCaster, wedge] : [track, wedge];
 }
+function trackStroke(context) {
+  const config = context.chart.config;
+  if (!config?.polarTrackStroke) {
+    return {};
+  }
+  const dash = (config.polarTrackDash ?? "").split(/[ ,]+/).map(Number).filter((part) => Number.isFinite(part) && part > 0);
+  return {
+    stroke: { kind: "solid", color: config.polarTrackStroke },
+    strokeWidth: finite(config.polarTrackStrokeWidth, 1),
+    dash: dash.length > 0 ? dash : void 0
+  };
+}
+function wedgeStroke(context) {
+  const config = context.chart.config;
+  if (!config?.pieStroke) {
+    return {};
+  }
+  return {
+    stroke: { kind: "solid", color: config.pieStroke },
+    strokeWidth: finite(config.pieStrokeWidth, 1)
+  };
+}
+function ringNodes(context, layout) {
+  const { chart, bounds, nextOrder } = context;
+  if (!chart.config?.polarRings || layout.range <= 0) {
+    return [];
+  }
+  return chartTicks(chart.axisY).filter((tick) => tick > layout.axisMin && tick < layout.axisMin + layout.range).map((tick) => {
+    const radius = layout.innerRadius + (layout.maxRadius - layout.innerRadius) * (tick - layout.axisMin) / layout.range;
+    return {
+      type: "ellipse",
+      id: `chart-polar-area-ring-${chart.id}-${tick}`,
+      order: nextOrder(),
+      bounds,
+      cx: layout.centerX,
+      cy: layout.centerY,
+      rx: radius,
+      ry: radius,
+      style: {
+        fill: { kind: "none" },
+        stroke: { kind: "solid", color: chart.textColor ?? "#334155" },
+        strokeWidth: finite(chart.gridWidth, 1),
+        opacity: 0.25
+      }
+    };
+  });
+}
 function renderPolarArea(context) {
   const layout = layoutOf(context);
-  const { centerX, centerY, innerRadius, maxRadius, axisMin, range, sweep } = layout;
+  const { centerX, centerY, innerRadius, maxRadius, axisMin, range, sweep, start } = layout;
   const showLabels = context.showLabels && sweep >= MIN_LABEL_SWEEP;
-  return context.chart.series.flatMap((series, index) => {
-    const angles = { start: START_ANGLE + index * sweep, end: START_ANGLE + (index + 1) * sweep };
+  const wedges = context.chart.series.flatMap((series, index) => {
+    const angles = { start: start + index * sweep, end: start + (index + 1) * sweep };
     const value = Math.max(0, finite(series.values[0], 0));
     const fraction = range > 0 ? Math.min(1, Math.max(0, (value - axisMin) / range)) : 0;
     const outerRadius = Math.max(innerRadius + 1, innerRadius + (maxRadius - innerRadius) * fraction);
@@ -6473,11 +6684,19 @@ function renderPolarArea(context) {
     const geometry = { centerX, centerY, outerRadius, innerRadius };
     return [...nodes, ...createWedgeLabel(context, geometry, angles, series, value, rawColor)];
   });
+  return [...wedges, ...ringNodes(context, layout)];
+}
+function labelSizes(chart) {
+  const base = Math.max(9, finite(chart.fontSize, 12));
+  return {
+    nameSize: Math.max(6, finite(chart.config?.polarNameSize, base)),
+    valueSize: Math.max(6, finite(chart.config?.polarValueSize, base))
+  };
 }
 function labelPlacement2(context, geometry, angles, series, fillColor) {
   const mid = (angles.start + angles.end) / 2;
-  const fontSize = Math.max(9, finite(context.chart.fontSize, 12));
-  const lineHeight = fontSize * 1.2;
+  const { nameSize, valueSize } = labelSizes(context.chart);
+  const lineHeight = (nameSize + valueSize) * 1.2 / 2;
   const ringThickness = geometry.outerRadius - geometry.innerRadius;
   const labelOffsetX = finite(series.labelOffsetX, 0);
   const labelOffsetY = finite(series.labelOffsetY, 0);
@@ -6485,13 +6704,14 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
   const tooThin = ringThickness < lineHeight * 2 + 6;
   const chordWidth = 2 * geometry.outerRadius * Math.sin(Math.abs(angles.end - angles.start) / 2);
   const fitsInline = !tooThin && chordWidth >= LABEL_WIDTH;
-  if (!fitsInline && !hasManualOffset) {
+  const outsideLabels = context.chart.config?.polarOutsideLabels ?? false;
+  if (!fitsInline && !hasManualOffset && !outsideLabels) {
     return void 0;
   }
   const outside = hasManualOffset || !fitsInline;
   const tickStart = pieArcPoint(geometry, mid, geometry.outerRadius + LEADER_INSET);
   const point = outside ? hasManualOffset ? addOffset(pieArcPoint(geometry, mid, geometry.outerRadius), labelOffsetX, labelOffsetY) : pieArcPoint(geometry, mid, geometry.outerRadius + OUTSIDE_GAP) : pieArcPoint(geometry, mid, geometry.innerRadius + ringThickness * LABEL_RADIUS_FRACTION);
-  const color2 = outside ? sameHueTint(representativeColor(fillColor, OUTSIDE_FALLBACK_COLOR), OUTSIDE_TINT_LIGHTNESS) ?? OUTSIDE_FALLBACK_COLOR : sameHueContrastColor(
+  const color2 = outside ? outsideLabels && context.chart.textColor ? context.chart.textColor : sameHueTint(representativeColor(fillColor, OUTSIDE_FALLBACK_COLOR), OUTSIDE_TINT_LIGHTNESS) ?? OUTSIDE_FALLBACK_COLOR : sameHueContrastColor(
     representativeColor(fillColor, "#0f172a"),
     contrastTextColor(representativeColor(fillColor, "#0f172a"))
   );
@@ -6504,8 +6724,8 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
   }
   const { chart, bounds, nextOrder } = context;
   const { point, color: color2, outside, mid, tickStart } = placement;
-  const fontSize = Math.max(9, finite(chart.fontSize, 12));
-  const lineHeight = fontSize * 1.2;
+  const { nameSize, valueSize } = labelSizes(chart);
+  const lineHeight = Math.max(nameSize, valueSize) * 1.2;
   const tickEnd = outside ? clipSegmentToRect(tickStart, point, LABEL_WIDTH / 2, lineHeight) : tickStart;
   const tick = {
     type: "path",
@@ -6528,22 +6748,28 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
     bounds,
     x: point.x - LABEL_WIDTH / 2,
     width: LABEL_WIDTH,
-    height: lineHeight,
     fontFamily: chart.fontFamily ?? DEFAULT_FONT,
-    fontSize,
     align: "center",
     verticalAlign: "middle",
     lineHeight: 1.2,
     color: color2
   };
+  const valueFirst = chart.config?.polarValueFirst ?? false;
+  const nameHeight = nameSize * 1.2;
+  const valueHeight = valueSize * 1.2;
+  const top = point.y - (nameHeight + valueHeight) / 2;
+  const nameY = valueFirst ? top + valueHeight : top;
+  const valueY = valueFirst ? top : top + nameHeight;
   const nameText = {
     type: "text",
     id: `chart-polar-area-label-name-${chart.id}-${series.id}`,
     order: nextOrder(),
     ...base,
-    y: point.y - lineHeight,
+    y: nameY,
+    height: nameSize * 1.2,
+    fontSize: nameSize,
     lines: [series.label],
-    fontWeight: "bold",
+    fontWeight: valueFirst ? "normal" : "bold",
     detail,
     prop: seriesLabelProp(series.id)
   };
@@ -6552,9 +6778,11 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
     id: `chart-polar-area-label-value-${chart.id}-${series.id}`,
     order: nextOrder(),
     ...base,
-    y: point.y,
+    y: valueY,
+    height: valueSize * 1.2,
+    fontSize: valueSize,
     lines: [formatFieldValue(value)],
-    fontWeight: "normal",
+    fontWeight: valueFirst ? "bold" : "normal",
     detail,
     prop: seriesValueProp(series.id, 0),
     propKind: "value"
@@ -6578,7 +6806,8 @@ function radarFrameFor(context) {
     min: chart.axisY.min,
     max: chart.axisY.max,
     count: radarCategoryCount(configuredCount, dataCount),
-    curved: chart.chartType === "radial"
+    curved: chart.chartType === "radial",
+    tension: chart.config?.radarTension
   };
 }
 function createRadarGeometry(context) {
@@ -6590,6 +6819,10 @@ function createRadarGeometry(context) {
   return {
     circular: frame.curved,
     areaOpacity: Math.max(0, Math.min(1, chart.config?.areaOpacity ?? 0.16)),
+    strokeWidth: Math.max(0, chart.config?.radarStrokeWidth ?? 2),
+    tension: frame.tension,
+    pointSize: Math.max(0, chart.config?.radarPointSize ?? 3),
+    showSpokes: chart.config?.radarSpokes ?? true,
     categories,
     centerX: frame.centerX,
     centerY: frame.centerY,
@@ -6614,7 +6847,7 @@ function renderRadarGrid(context, geometry) {
   if (context.chart.showGrid === false) {
     return [];
   }
-  return [...renderRings(context, geometry), ...renderSpokes(context, geometry)];
+  return [...renderRings(context, geometry), ...geometry.showSpokes ? renderSpokes(context, geometry) : []];
 }
 function renderRings(context, geometry) {
   return chartTicks(context.chart.axisY).filter((tick) => tick > context.chart.axisY.min).map((tick) => createRingNode(context, geometry, tick));
@@ -6722,11 +6955,11 @@ function renderRadarSeries(context, geometry) {
 function renderSeries(context, geometry, series, seriesIndex) {
   const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
   const points = seriesPoints(series, context, geometry);
-  const path = radarSeriesPath(points, geometry.circular);
+  const path = radarSeriesPath(points, geometry.circular, geometry.tension);
   return [
     createSeriesFill(context, geometry, series, path, color2),
-    createSeriesStroke(context, series, path, color2),
-    ...createSeriesPoints(context, series, points, color2)
+    ...geometry.strokeWidth > 0 ? [createSeriesStroke(context, geometry, series, path, color2)] : [],
+    ...geometry.pointSize > 0 ? createSeriesPoints(context, geometry, series, points, color2) : []
   ];
 }
 function seriesPoints(series, context, geometry) {
@@ -6751,7 +6984,7 @@ function createSeriesFill(context, geometry, series, path, color2) {
     }
   };
 }
-function createSeriesStroke(context, series, path, color2) {
+function createSeriesStroke(context, geometry, series, path, color2) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   return {
     type: "path",
@@ -6763,13 +6996,13 @@ function createSeriesStroke(context, series, path, color2) {
     style: {
       fill: { kind: "none" },
       stroke: paint(color2, diagnostics, chart.id),
-      strokeWidth: 2,
+      strokeWidth: geometry.strokeWidth,
       lineJoin: "round",
       shadow: resolveChartShadow(chart.shadowStyle)
     }
   };
 }
-function createSeriesPoints(context, series, points, color2) {
+function createSeriesPoints(context, geometry, series, points, color2) {
   const { chart, bounds, diagnostics, nextOrder } = context;
   return points.map((point, pointIndex) => ({
     type: "ellipse",
@@ -6778,8 +7011,8 @@ function createSeriesPoints(context, series, points, color2) {
     bounds,
     cx: point.x,
     cy: point.y,
-    rx: 3,
-    ry: 3,
+    rx: geometry.pointSize,
+    ry: geometry.pointSize,
     detail: { of: "chartValue", series: series.id, valueIndex: pointIndex, mark: "radar-vertex" },
     prop: seriesValueProp(series.id, pointIndex),
     style: { fill: paint(color2, diagnostics, chart.id) }
@@ -6797,7 +7030,7 @@ function renderRadar(context) {
 }
 
 // src/renderScene/charts/renderers/radialBar.ts
-var START_ANGLE2 = -Math.PI / 2;
+var TOP3 = -Math.PI / 2;
 var DEFAULT_RING_THICKNESS = 14;
 var DEFAULT_RING_GAP = 4;
 var TRACK_OPACITY = 0.18;
@@ -6823,14 +7056,14 @@ function ringShadow(shadow, ringThickness) {
   const scale = distance > maxDistance ? maxDistance / distance : 1;
   return { ...shadow, blur, dx: shadow.dx * scale, dy: shadow.dy * scale };
 }
-function ringProgressPath(cx, cy, r, sweep) {
+function ringProgressPath(cx, cy, r, sweep, from) {
   if (sweep >= Math.PI * 2 - FULL_SWEEP_EPSILON) {
-    const start2 = arcPoint(cx, cy, r, START_ANGLE2);
-    const mid = arcPoint(cx, cy, r, START_ANGLE2 + Math.PI);
+    const start2 = arcPoint(cx, cy, r, from);
+    const mid = arcPoint(cx, cy, r, from + Math.PI);
     return `M ${start2.x} ${start2.y} A ${r} ${r} 0 1 1 ${mid.x} ${mid.y} A ${r} ${r} 0 1 1 ${start2.x} ${start2.y}`;
   }
-  const start = arcPoint(cx, cy, r, START_ANGLE2);
-  const end = arcPoint(cx, cy, r, START_ANGLE2 + sweep);
+  const start = arcPoint(cx, cy, r, from);
+  const end = arcPoint(cx, cy, r, from + sweep);
   const largeArc = sweep > Math.PI ? 1 : 0;
   return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 1 ${end.x} ${end.y}`;
 }
@@ -6844,12 +7077,16 @@ function layoutOf2(context) {
     ringThickness: Math.max(1, finite(chart.config?.ringThickness, DEFAULT_RING_THICKNESS)),
     ringGap: Math.max(0, finite(chart.config?.ringGap, DEFAULT_RING_GAP)),
     axisMin,
-    range: finite(chart.axisY.max, 100) - axisMin
+    range: finite(chart.axisY.max, 100) - axisMin,
+    start: TOP3 + finite(chart.config?.ringStartAngle, 0) * Math.PI / 180,
+    total: Math.min(360, Math.max(1, finite(chart.config?.ringSweep, 360))) * Math.PI / 180,
+    trackOpacity: Math.min(1, Math.max(0, finite(chart.config?.ringTrackOpacity, TRACK_OPACITY))),
+    cap: chart.config?.ringCap ?? "round"
   };
 }
 function ringEndShadows(context, layout, series, radius, sweep, color2) {
   const { chart, bounds, nextOrder } = context;
-  const { centerX, centerY, ringThickness } = layout;
+  const { centerX, centerY, ringThickness, start } = layout;
   const shadow = resolveChartShadow(chart.shadowStyle);
   const isFullCircle = sweep >= Math.PI * 2 - FULL_SWEEP_EPSILON;
   if (!shadow || isFullCircle) {
@@ -6858,8 +7095,8 @@ function ringEndShadows(context, layout, series, radius, sweep, color2) {
   const clampedShadow = ringShadow(shadow, ringThickness);
   const stubSweep = Math.min(sweep, ringThickness / radius);
   return [
-    [START_ANGLE2, START_ANGLE2 + stubSweep],
-    [START_ANGLE2 + sweep - stubSweep, START_ANGLE2 + sweep]
+    [start, start + stubSweep],
+    [start + sweep - stubSweep, start + sweep]
   ].map(
     ([from, to], endIndex) => ({
       type: "path",
@@ -6871,7 +7108,7 @@ function ringEndShadows(context, layout, series, radius, sweep, color2) {
         fill: { kind: "none" },
         stroke: color2,
         strokeWidth: ringThickness,
-        lineCap: "round",
+        lineCap: layout.cap,
         shadow: clampedShadow,
         clip: {
           type: "path",
@@ -6881,9 +7118,9 @@ function ringEndShadows(context, layout, series, radius, sweep, color2) {
     })
   );
 }
-function ringNodes(context, layout, series, index) {
+function ringNodes2(context, layout, series, index) {
   const { chart, bounds, diagnostics, nextOrder } = context;
-  const { centerX, centerY, outerRadius, ringThickness, ringGap, axisMin, range } = layout;
+  const { centerX, centerY, outerRadius, ringThickness, ringGap, axisMin, range, start, total, trackOpacity, cap } = layout;
   const radius = outerRadius - index * (ringThickness + ringGap) - ringThickness / 2;
   if (radius <= ringThickness / 2) {
     return [];
@@ -6891,7 +7128,13 @@ function ringNodes(context, layout, series, index) {
   const color2 = paint(series.color ?? CHART_COLORS[index % CHART_COLORS.length], diagnostics, chart.id);
   const value = Math.max(0, finite(series.values[0], 0));
   const fraction = range > 0 ? Math.min(1, Math.max(0, (value - axisMin) / range)) : 0;
-  const track = {
+  const trackStyle = {
+    fill: { kind: "none" },
+    stroke: color2,
+    strokeWidth: ringThickness,
+    opacity: trackOpacity
+  };
+  const track = total >= Math.PI * 2 - FULL_SWEEP_EPSILON ? {
     type: "ellipse",
     id: `chart-radial-bar-track-${chart.id}-${series.id}`,
     order: nextOrder(),
@@ -6900,28 +7143,35 @@ function ringNodes(context, layout, series, index) {
     cy: centerY,
     rx: radius,
     ry: radius,
-    style: { fill: { kind: "none" }, stroke: color2, strokeWidth: ringThickness, opacity: TRACK_OPACITY }
+    style: trackStyle
+  } : {
+    type: "path",
+    id: `chart-radial-bar-track-${chart.id}-${series.id}`,
+    order: nextOrder(),
+    bounds,
+    d: arcSegmentPath(centerX, centerY, radius, start, start + total),
+    style: { ...trackStyle, lineCap: cap }
   };
   if (fraction <= 0) {
     return [track];
   }
-  const sweep = fraction * Math.PI * 2;
+  const sweep = fraction * total;
   const casters = ringEndShadows(context, layout, series, radius, sweep, color2);
   const progress = {
     type: "path",
     id: `chart-radial-bar-ring-${chart.id}-${series.id}`,
     order: nextOrder(),
     bounds,
-    d: ringProgressPath(centerX, centerY, radius, sweep),
+    d: ringProgressPath(centerX, centerY, radius, sweep, start),
     detail: { of: "chartValue", series: series.id, valueIndex: 0, mark: "radial-bar-ring" },
     prop: seriesValueProp(series.id, 0),
-    style: { fill: { kind: "none" }, stroke: color2, strokeWidth: ringThickness, lineCap: "round" }
+    style: { fill: { kind: "none" }, stroke: color2, strokeWidth: ringThickness, lineCap: cap }
   };
   return [track, ...casters, progress];
 }
 function renderRadialBar(context) {
   const layout = layoutOf2(context);
-  return context.chart.series.flatMap((series, index) => ringNodes(context, layout, series, index));
+  return context.chart.series.flatMap((series, index) => ringNodes2(context, layout, series, index));
 }
 
 // src/renderScene/charts/renderers/sankey/links.ts
@@ -6931,11 +7181,11 @@ function renderSankeyLinks(context, data) {
   const { plot } = context;
   const clipPath = shadow ? `M ${plot.x} ${plot.y} H ${plot.x + plot.width} V ${plot.y + plot.height} H ${plot.x} Z` : void 0;
   return data.links.map((link, linkIndex) => {
-    const ribbon = createSankeyLinkRibbon(data, link, linkIndex, gradient);
+    const ribbon = createSankeyLinkRibbon(context, data, link, linkIndex, gradient);
     return createSankeyRibbonNode(context, ribbon, shadow, clipPath, gradient);
   });
 }
-function createSankeyLinkRibbon(data, link, linkIndex, gradient) {
+function createSankeyLinkRibbon(context, data, link, linkIndex, gradient) {
   const source = {
     x: data.baseX + link.x0,
     top: data.baseY + link.sourceY0,
@@ -6946,6 +7196,7 @@ function createSankeyLinkRibbon(data, link, linkIndex, gradient) {
     top: data.baseY + link.targetY0,
     bottom: data.baseY + link.targetY1
   };
+  const config = context.chart.config;
   const fromColor = link.color || data.nodeColors.get(link.source) || DEFAULT_ZONE_FILL;
   const toColor = data.nodeColors.get(link.target) || DEFAULT_ZONE_FILL;
   const fill2 = gradient ? {
@@ -6962,9 +7213,9 @@ function createSankeyLinkRibbon(data, link, linkIndex, gradient) {
     toId: link.target,
     source,
     target,
-    controlX: (source.x + target.x) / 2,
+    controlX: source.x + (target.x - source.x) * Math.min(1, Math.max(0, finite(config?.sankeyLinkCurve, 0.5))),
     fill: fill2,
-    opacity: link.color ? 0.85 : 0.45
+    opacity: Math.min(1, Math.max(0, finite(config?.sankeyLinkOpacity, link.color ? 0.85 : 0.45)))
   };
 }
 function createSankeyRibbonNode(context, ribbon, shadow, clipPath, gradient) {
@@ -7108,7 +7359,7 @@ function createOutsideLabel(context, data, node) {
       chart,
       align: isLastColumn ? "right" : "left"
     }),
-    fontSize: data.fontSize - 2,
+    fontSize: data.labelSize,
     fontWeight: "bold",
     verticalAlign: "middle"
   };
@@ -7119,7 +7370,7 @@ function createInsideLabel(context, data, node, orientation) {
   const y = data.baseY + node.y;
   const centerX = x + node.width / 2;
   const centerY = y + node.height / 2;
-  const fontSize = data.fontSize - 2;
+  const fontSize = data.labelSize;
   const id = `chart-sankey-label-${chart.id}-${node.id}`;
   if (orientation === "vertical") {
     const thickness = fontSize * 1.4;
@@ -7165,13 +7416,17 @@ function createSankeyRenderData(context) {
   const { chart, plot, showLabels } = context;
   const labelGutter = showLabels ? 92 : 0;
   const availableWidth = Math.max(1, plot.width - labelGutter * 2);
-  const layout = layoutSankey(createNodeInputs(context), createLinkInputs(context), availableWidth, plot.height);
+  const layout = layoutSankey(createNodeInputs(context), createLinkInputs(context), availableWidth, plot.height, {
+    nodeWidth: Math.max(1, finite(chart.config?.sankeyNodeWidth, 18)),
+    nodeGap: Math.max(0, finite(chart.config?.sankeyNodeGap, 8))
+  });
   return {
     ...layout,
     baseX: plot.x + labelGutter,
     baseY: plot.y,
     labelGutter,
     fontSize: Math.max(9, finite(chart.fontSize, 12)),
+    labelSize: Math.max(6, finite(chart.config?.sankeyLabelSize, Math.max(9, finite(chart.fontSize, 12)) - 2)),
     columnCount: Math.max(1, ...layout.nodes.map((node) => node.column + 1)),
     nodeColors: new Map(layout.nodes.map((node) => [node.id, node.color || DEFAULT_ZONE_FILL]))
   };
@@ -7211,20 +7466,24 @@ function renderSankey(context) {
 }
 
 // src/renderScene/charts/renderers/scatter.ts
-function renderScatter(context, radius = 4) {
+var DEFAULT_POINT_SIZE = 4;
+function renderScatter(context) {
   const nodes = [];
   const shadow = resolveChartShadow(context.chart.shadowStyle);
   context.chart.series.forEach((series, seriesIndex) => {
     const color2 = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];
     const points = pixelPoints(context, seriesValuePairs(context.chart, series));
     points.forEach((point, pointIndex) => {
-      nodes.push(createScatterPoint(context, series, point, pointIndex, color2, radius, shadow));
+      nodes.push(createScatterPoint(context, series, point, pointIndex, color2, shadow));
     });
   });
   return nodes;
 }
-function createScatterPoint(context, series, point, pointIndex, color2, radius, shadow) {
+function createScatterPoint(context, series, point, pointIndex, color2, shadow) {
   const { chart, bounds, diagnostics, nextOrder } = context;
+  const config = chart.config;
+  const radius = config?.pointSize ?? DEFAULT_POINT_SIZE;
+  const strokeWidth = config?.pointStrokeWidth ?? 0;
   return {
     type: "ellipse",
     id: `chart-point-${chart.id}-${series.id}-${pointIndex}`,
@@ -7235,7 +7494,13 @@ function createScatterPoint(context, series, point, pointIndex, color2, radius,
     rx: radius,
     ry: radius,
     detail: { of: "chartValue", series: series.id, valueIndex: pointIndex },
-    style: { fill: paint(color2, diagnostics, chart.id), shadow }
+    style: {
+      fill: paint(color2, diagnostics, chart.id),
+      stroke: strokeWidth > 0 ? paint(config?.pointStrokeColor ?? color2, diagnostics, chart.id) : void 0,
+      strokeWidth: strokeWidth > 0 ? strokeWidth : void 0,
+      opacity: config?.pointOpacity,
+      shadow
+    }
   };
 }
 
@@ -7257,7 +7522,11 @@ function createTreemapLayout(context) {
     gridWidth: Math.max(1, plot.width),
     gridHeight: Math.max(1, plot.height - legendHeight),
     cellGap,
-    cellRadius: Math.max(0, finite(chart.config?.barCornerRadius, cellGap))
+    cellRadius: Math.max(0, finite(chart.config?.barCornerRadius, cellGap)),
+    headerHeight: Math.max(0, finite(chart.config?.headerHeight, 20)),
+    labelSize: Math.max(6, finite(chart.config?.tileLabelSize, Math.max(8, fontSize - 1))),
+    valueSize: Math.max(6, finite(chart.config?.tileValueSize, Math.max(8, fontSize - 1))),
+    labelPadding: Math.max(0, finite(chart.config?.tileLabelPadding, 4))
   };
 }
 function treemapLeafValue(leaf) {
@@ -7405,7 +7674,6 @@ function renderSideLegend(context, layout) {
 }
 
 // src/renderScene/charts/renderers/treemap/tiles.ts
-var HEADER_HEIGHT = 20;
 function renderTreemapTiles(context, layout) {
   const { tiles, headers } = layoutTreemapTiles(context, layout);
   const nodes = [];
@@ -7444,7 +7712,7 @@ function layoutTreemapTiles(context, layout) {
   const tiles = [];
   const headers = [];
   groupRects.forEach((groupRect) => {
-    const headerHeight = context.showLabels ? Math.min(HEADER_HEIGHT, groupRect.height) : 0;
+    const headerHeight = context.showLabels ? Math.min(layout.headerHeight, groupRect.height) : 0;
     if (context.showLabels) {
       headers.push({
         key: groupRect.item.key,
@@ -7478,7 +7746,7 @@ function renderTreemapHeader(context, layout, header, index) {
     x: plot.x + header.x,
     y: plot.y + header.y,
     width: header.width,
-    height: HEADER_HEIGHT,
+    height: layout.headerHeight,
     rx: layout.cellRadius,
     style: { fill: { kind: "solid", color: fill2 } }
   };
@@ -7490,7 +7758,7 @@ function renderTreemapHeader(context, layout, header, index) {
       bounds,
       frame: {
         x: plot.x + header.x,
-        y: plot.y + header.y + (HEADER_HEIGHT - smallFontSize) / 2,
+        y: plot.y + header.y + (layout.headerHeight - smallFontSize) / 2,
         width: header.width,
         height: smallFontSize + 2
       },
@@ -7548,8 +7816,8 @@ function createTileNode(context, layout, tile, color2, nextColor) {
     rx: layout.cellRadius,
     style: {
       fill: fill2,
-      stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
-      strokeWidth: finite(chart.gridWidth, 1),
+      stroke: { kind: "solid", color: chart.config?.tileStrokeColor ?? chart.gridColor ?? "#e2e8f0" },
+      strokeWidth: finite(chart.config?.tileStrokeWidth, finite(chart.gridWidth, 1)),
       shadow,
       clip: clipPath ? { type: "path", d: clipPath } : void 0
     }
@@ -7559,13 +7827,15 @@ function createTileLabel(context, layout, tile, color2) {
   const { chart, plot, bounds, nextOrder } = context;
   const { leaf, value } = tile.item;
   const gap = layout.cellGap;
-  const width = Math.max(1, tile.width - gap - 8);
-  const height = Math.max(1, tile.height - gap - 6);
-  const x = plot.x + tile.x + gap / 2 + 4;
-  const y = plot.y + tile.y + gap / 2 + 3;
-  const textColor = contrastTextColor(representativeColor(color2, "#ffffff"));
-  const labelLines = wrapText(leaf.label, width, layout.smallFontSize);
-  const lineHeight = layout.smallFontSize * 1.2;
+  const pad = layout.labelPadding;
+  const width = Math.max(1, tile.width - gap - pad * 2);
+  const height = Math.max(1, tile.height - gap - pad * 1.5);
+  const x = plot.x + tile.x + gap / 2 + pad;
+  const y = plot.y + tile.y + gap / 2 + pad * 0.75;
+  const textColor = chart.config?.tileTextColor ?? contrastTextColor(representativeColor(color2, "#ffffff"));
+  const lineHeight = layout.labelSize * 1.2;
+  const maxLines = Math.max(1, Math.floor(height / lineHeight));
+  const labelLines = wrapText(leaf.label, width, layout.labelSize).slice(0, maxLines).map((line) => ellipsizeToWidth(line, width, layout.labelSize, true));
   const label = {
     ...chartText({
       id: `chart-treemap-label-${chart.id}-${leaf.id}`,
@@ -7576,10 +7846,15 @@ function createTileLabel(context, layout, tile, color2) {
       chart
     }),
     lines: labelLines,
-    fontSize: layout.smallFontSize,
+    fontSize: layout.labelSize,
     fontWeight: "bold",
     color: textColor
   };
+  const valueText = String(value);
+  const valueFits = labelLines.length * lineHeight + layout.valueSize * 1.2 <= height + 2 && estimateTextWidth(valueText, layout.valueSize, false) <= width;
+  if (chart.config?.showTileValues === false || !valueFits) {
+    return [label];
+  }
   const valueNode = {
     ...chartText({
       id: `chart-treemap-value-${chart.id}-${leaf.id}`,
@@ -7595,7 +7870,7 @@ function createTileLabel(context, layout, tile, color2) {
       chart
     }),
     lines: [String(value)],
-    fontSize: layout.smallFontSize,
+    fontSize: layout.valueSize,
     color: textColor
   };
   return [label, valueNode];
@@ -7694,9 +7969,10 @@ function radarDetail(chart, plot) {
   const centerX = plot.x + plot.width / 2;
   const centerY = plot.y + plot.height / 2;
   const curved = chart.chartType === "radial" ? 1 : 0;
+  const tension = chart.config?.radarTension;
   return {
     of: "radarGeometry",
-    radarGeometry: `${centerX},${centerY},${radius},${chart.axisY.min},${chart.axisY.max},${count},${curved}`
+    radarGeometry: `${centerX},${centerY},${radius},${chart.axisY.min},${chart.axisY.max},${count},${curved}${tension === void 0 ? "" : `,${tension}`}`
   };
 }
 function frameDetail(chart, plot) {
@@ -8458,7 +8734,7 @@ function shaderSurfaceSvg(node, defs) {
   const rotation = transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 });
   const parameters = xml(JSON.stringify(node.shader.parameters));
   const fillColor = node.fillColor ? ` data-sf-shader-fill="${xml(node.fillColor)}"` : "";
-  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}"${fillColor} x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation} pointer-events="${node.shader.program === "ruler" ? "all" : "none"}"><canvas xmlns="http://www.w3.org/1999/xhtml" data-sf-shader-canvas="true" style="display:block;width:100%;height:100%;pointer-events:none"></canvas></foreignObject>`;
+  return `<foreignObject id="${defs.elementId(node.id)}"${contractAttrs(node)} data-sf-shader="${xml(node.shader.program)}" data-sf-shader-name="${xml(node.shader.name)}" data-sf-shader-params="${parameters}" data-sf-shader-mask="${node.mask}"${fillColor} x="${num(node.x)}" y="${num(node.y)}" width="${num(node.width)}" height="${num(node.height)}"${rotation} pointer-events="${node.shader.program === "ruler" || node.identity?.role === "widget" ? "all" : "none"}"><canvas xmlns="http://www.w3.org/1999/xhtml" data-sf-shader-canvas="true" style="display:block;width:100%;height:100%;pointer-events:none"></canvas></foreignObject>`;
 }
 function rollingDigitSvg(character, node) {
   const style = node.widgetStyle;
@@ -8469,7 +8745,7 @@ function rollingDigitSvg(character, node) {
 }
 function rollingNumberSvg(node, defs) {
   const rotation = transform(node.rotation, { x: node.x + node.width / 2, y: node.y + node.height / 2 });
-  const fontSize = Math.max(1, Math.min(node.width, node.height) * 0.28);
+  const fontSize = node.widgetStyle.fontSize > 0 ? node.widgetStyle.fontSize : Math.max(1, Math.min(node.width, node.height) * 0.28);
   const label = node.label ? `<span xmlns="http://www.w3.org/1999/xhtml" style="margin-bottom:.14em;color:${xml(node.widgetStyle.labelColor)};font-size:.16em;font-weight:600;letter-spacing:.24em;line-height:1">${xml(node.label)}</span>` : "";
   const digits = [...node.value].map((character) => rollingDigitSvg(character, node)).join("");
   const widgetStyle = xml(JSON.stringify(node.widgetStyle));
@@ -8555,5 +8831,5 @@ function render(source, options = {}) {
 }
 
 export { DEFAULT_ROLLING_NUMBER_STYLE, collectCanvasObjects, decodeColor, decodeShadow, formatRollingNumber, render, renderCanvas, sflToRenderInput };
-//# sourceMappingURL=chunk-KFJIFHXG.js.map
-//# sourceMappingURL=chunk-KFJIFHXG.js.map
+//# sourceMappingURL=chunk-65IVT4GK.js.map
+//# sourceMappingURL=chunk-65IVT4GK.js.map