WIP: custom svg for static point

packages/react-spectrum-charts-s2/src/stories/Line/Features/LineStaticPointShape.story.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { ReactElement } from 'react';
+
+import { StoryFn } from '@storybook/react';
+
+import { Chart } from '../../../Chart';
+import { Axis, Legend, Line } from '../../../components';
+import useChartProps from '../../../hooks/useChartProps';
+import { workspaceTrendsDataWithVisiblePoints } from '../../../stories/data/data';
+import { bindWithProps } from '../../../test-utils';
+import { ChartProps } from '../../../types';
+
+export default {
+  title: 'React Spectrum Charts 2/Line/Features',
+  component: Line,
+};
+
+const defaultChartProps: ChartProps = {
+  data: workspaceTrendsDataWithVisiblePoints,
+  minWidth: 400,
+  maxWidth: 800,
+  height: 400,
+};
+
+const StaticPointShapeStory: StoryFn<typeof Line> = (args): ReactElement => {
+  const chartProps = useChartProps(defaultChartProps);
+  return (
+    <Chart {...chartProps}>
+      <Axis position="left" grid />
+      <Axis position="bottom" labelFormat="time" />
+      <Line {...args} />
+      <Legend lineWidth={{ value: 0 }} />
+    </Chart>
+  );
+};
+
+export const StaticPointShape = bindWithProps(StaticPointShapeStory);
+StaticPointShape.args = {
+  color: 'series',
+  name: 'line0',
+  dimension: 'datetime',
+  metric: 'value',
+  scaleType: 'time',
+  staticPoint: 'staticPoint',
+  staticPointShape: 'M0,-1L0.951,-0.309L0.588,0.809L-0.588,0.809L-0.951,-0.309Z',
+};

packages/vega-spec-builder-s2/src/line/linePointUtils.ts

@@ -37,6 +37,7 @@ export const getLineStaticPoint = (lineOptions: LineSpecOptions): SymbolMark =>
     scaleType,
     dimension,
     pointSize = 64,
+    staticPointShape,
   } = lineOptions;
   return {
     name: `${name}_staticPoints`,
@@ -50,6 +51,7 @@ export const getLineStaticPoint = (lineOptions: LineSpecOptions): SymbolMark =>
         fill: { signal: BACKGROUND_COLOR },
         stroke: getColorProductionRule(color, colorScheme),
         y: getLineYEncoding(lineOptions, metric),
+        ...(staticPointShape ? { shape: { value: staticPointShape } } : {}),
       },
       update: {
         x: getXProductionRule(scaleType, dimension),

packages/vega-spec-builder-s2/src/line/lineUtils.ts

@@ -80,6 +80,7 @@ export interface LineMarkOptions {
   scatterPaths?: ScatterPathOptions[];
   segmentLabels?: SegmentLabelOptions[];
   staticPoint?: string;
+  staticPointShape?: string;
   trendlines?: TrendlineOptions[];
   interpolate?: InterpolationType;
   alternateSegmentKey?: string;

packages/vega-spec-builder-s2/src/types/marks/lineSpec.types.ts

@@ -64,6 +64,8 @@ export interface LineOptions {
   scaleType?: ScaleType;
   /** Key in the data that if it exists and the value resolves to true for each data object, a point will be drawn for that data point on the line. */
   staticPoint?: string;
+  /** Shape of the static point. Accepts Vega named shapes ('circle', 'square', 'triangle-up', etc.) or a custom SVG path string. @default 'circle' */
+  staticPointShape?: string;
   /** Sets the interaction mode for the line */
   interactionMode?: InteractionMode;
   /** Axis that the metric is trended against (y-axis) */