@juspay/svelte-ui-components 2.109.0 → 2.110.0

package/dist/LineChart/LineChart.svelte

@@ -204,11 +204,25 @@
     series.map((s, si) => {
       const color = s.color ?? getColor(si);
       const points: Point[] = s.data.map((d) => ({ x: xScale(d.x), y: yScale(d.y) }));
+      const finitePoints = points.filter(
+        (point) => Number.isFinite(point.x) && Number.isFinite(point.y)
+      );
+      // Design-system contract: a series with a single data point renders as a
+      // flat line at that y across the full plot width (a lone dot reads as a
+      // glitch), while the point marker itself still renders at its true x.
+      const isSinglePoint = finitePoints.length === 1;
+      const pathPoints: Point[] = isSinglePoint
+        ? [
+            { x: 0, y: finitePoints[0].y },
+            { x: dims.innerWidth, y: finitePoints[0].y }
+          ]
+        : points;
       return {
         color,
         points,
-        path: linePath(points, curve),
-        areaD: areaPath(points, dims.innerHeight, curve),
+        dash: s.dash === true ? '6 4' : typeof s.dash === 'string' ? s.dash : null,
+        path: linePath(pathPoints, isSinglePoint ? 'linear' : curve),
+        areaD: areaPath(pathPoints, dims.innerHeight, isSinglePoint ? 'linear' : curve),
         hidden: hiddenSeries.has(si)
       };
     })
@@ -639,6 +653,7 @@
                 d={line.path}
                 stroke={line.color}
                 stroke-width={strokeWidth}
+                stroke-dasharray={line.dash}
                 fill="none"
               />
               {#if line.points.length === 1 && !showDots && Number.isFinite(line.points[0].x) && Number.isFinite(line.points[0].y)}

package/dist/LineChart/properties.d.ts

@@ -10,6 +10,12 @@ export type LineChartSeries = {
     name: string;
     data: LineChartDataPoint[];
     color?: string;
+    /**
+     * Dashed stroke for this series (e.g. a comparison/previous-period line).
+     * `true` uses the default `'6 4'` pattern; a string is passed through as a
+     * custom SVG `stroke-dasharray`. Omit for a solid line.
+     */
+    dash?: boolean | string;
 };
 export type LineChartTooltipContext = {
     x: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.109.0",
+  "version": "2.110.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",