# Point

Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.

## Import

```tsx
import { Point } from '@coinbase/cds-web-visualization'
```

## Examples

### Basic Example

Points are visual markers that highlight specific data values on a chart. They can be used to emphasize important data points, show discrete values, or provide interactive elements.

```jsx live
<LineChart
  enableScrubbing
  height={{ base: 150, tablet: 200, desktop: 250 }}
  series={[
    {
      id: 'prices',
      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
    },
  ]}
  curve="monotone"
  showYAxis
  showArea
  yAxis={{
    showGrid: true,
  }}
  renderPoints={() => true}
>
  <Scrubber />
</LineChart>
```

### Conditional Points

You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.

```jsx live
function AssetPriceWithMinMax() {
  const data = sparklineInteractiveData.hour.map((d) => d.value);

  const minPrice = Math.min(...data);
  const maxPrice = Math.max(...data);

  const formatPrice = useCallback((price: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(price);
  }, []);

  return (
    <LineChart
      series={[
        {
          id: 'btc',
          data: data,
          color: assets.btc.color,
        },
      ]}
      showArea
      areaType="dotted"
      height={{ base: 150, tablet: 200, desktop: 250 }}
      style={{ outlineColor: assets.btc.color }}
      renderPoints={({ dataX, dataY }) => {
        const isMin = dataY === minPrice;
        const isMax = dataY === maxPrice;

        if (isMin) {
          return { label: formatPrice(dataY), labelProps: {  dy: 6, verticalAlignment: 'top' } };
        }

        if (isMax) {
          return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
        }
      }}
    />
  );
};
```

### Interactive Points

Points can be made interactive by adding click handlers, allowing users to explore data in more detail.

```jsx live
<LineChart
  height={{ base: 150, tablet: 200, desktop: 250 }}
  series={[
    {
      id: 'sales',
      data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
    },
  ]}
  curve="monotone"
  showYAxis
  showArea
  yAxis={{
    showGrid: true,
    label: 'Sales (units)',
  }}
  renderPoints={({ dataX, dataY }) => {
    const months = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    return {
      radius: 4,
      onClick: () => alert(`${months[dataX]}: ${dataY} units sold`),
      accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
    };
  }}
/>
```

### Customization

Points support extensive customization through various properties including colors, sizes, animations, and labels.

```jsx live
<LineChart
  height={{ base: 150, tablet: 200, desktop: 250 }}
  series={[
    {
      id: 'performance',
      data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
    },
  ]}
  curve="monotone"
  showYAxis
  showArea
  yAxis={{
    showGrid: true,
    label: 'Performance Score',
  }}
  renderPoints={({ dataX, dataY }) => {
    const isHighPerformance = dataY >= 90;
    const isLowPerformance = dataY < 75;

    return {
      fill: isHighPerformance
        ? 'var(--color-bgPositive)'
        : isLowPerformance
          ? 'var(--color-bgNegative)'
          : 'var(--color-fgPrimary)',
      radius: isHighPerformance ? 6 : 4,
      strokeWidth: 2,
      stroke: 'var(--color-bg)',
      label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
      labelProps: {
        verticalAlignment: isHighPerformance ? 'bottom' : 'top',
        dy: isHighPerformance ? -10 : 10,
        color: isHighPerformance
          ? 'var(--color-fgPositive)'
          : isLowPerformance
            ? 'var(--color-fgNegative)'
            : undefined,
      },
    };
  }}
/>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `dataX` | `number` | Yes | `-` | X coordinate in data space (not pixel coordinates). |
| `dataY` | `number` | Yes | `-` | Y coordinate in data space (not pixel coordinates). |
| `accentHeight` | `string \| number` | No | `-` | - |
| `accessibilityLabel` | `string` | No | `-` | Accessibility label for screen readers to describe the point. If not provided, a default label will be generated using the data coordinates. |
| `accumulate` | `none \| sum` | No | `-` | - |
| `additive` | `sum \| replace` | No | `-` | - |
| `alignmentBaseline` | `alphabetic \| hanging \| ideographic \| mathematical \| inherit \| auto \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge` | No | `-` | - |
| `allowReorder` | `no \| yes` | No | `-` | - |
| `alphabetic` | `string \| number` | No | `-` | - |
| `amplitude` | `string \| number` | No | `-` | - |
| `animate` | `boolean` | No | `-` | Override the charts animation setting for this specific point. When undefined, uses the chart contexts animation setting. |
| `arabicForm` | `initial \| medial \| terminal \| isolated` | No | `-` | - |
| `ascent` | `string \| number` | No | `-` | - |
| `attributeName` | `string` | No | `-` | - |
| `attributeType` | `string` | No | `-` | - |
| `autoReverse` | `false \| true \| true \| false` | No | `-` | - |
| `azimuth` | `string \| number` | No | `-` | - |
| `baseFrequency` | `string \| number` | No | `-` | - |
| `baseProfile` | `string \| number` | No | `-` | - |
| `baselineShift` | `string \| number` | No | `-` | - |
| `bbox` | `string \| number` | No | `-` | - |
| `begin` | `string \| number` | No | `-` | - |
| `bias` | `string \| number` | No | `-` | - |
| `by` | `string \| number` | No | `-` | - |
| `calcMode` | `string \| number` | No | `-` | - |
| `capHeight` | `string \| number` | No | `-` | - |
| `className` | `string` | No | `-` | Custom class name for the point. |
| `classNames` | `{ container?: string; point?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
| `clip` | `string \| number` | No | `-` | - |
| `clipPath` | `string` | No | `-` | - |
| `clipPathUnits` | `string \| number` | No | `-` | - |
| `clipRule` | `string \| number` | No | `-` | - |
| `color` | `string` | No | `-` | - |
| `colorInterpolation` | `string \| number` | No | `-` | - |
| `colorInterpolationFilters` | `inherit \| auto \| sRGB \| linearRGB` | No | `-` | - |
| `colorProfile` | `string \| number` | No | `-` | - |
| `colorRendering` | `string \| number` | No | `-` | - |
| `contentScriptType` | `string \| number` | No | `-` | - |
| `contentStyleType` | `string \| number` | No | `-` | - |
| `crossOrigin` | ` \| anonymous \| use-credentials` | No | `-` | - |
| `cursor` | `string \| number` | No | `-` | - |
| `cx` | `string \| number` | No | `-` | - |
| `cy` | `string \| number` | No | `-` | - |
| `d` | `string` | No | `-` | - |
| `decelerate` | `string \| number` | No | `-` | - |
| `descent` | `string \| number` | No | `-` | - |
| `diffuseConstant` | `string \| number` | No | `-` | - |
| `direction` | `string \| number` | No | `-` | - |
| `display` | `string \| number` | No | `-` | - |
| `divisor` | `string \| number` | No | `-` | - |
| `dominantBaseline` | `string \| number` | No | `-` | - |
| `dur` | `string \| number` | No | `-` | - |
| `dx` | `string \| number` | No | `-` | - |
| `dy` | `string \| number` | No | `-` | - |
| `edgeMode` | `string \| number` | No | `-` | - |
| `elevation` | `string \| number` | No | `-` | - |
| `enableBackground` | `string \| number` | No | `-` | - |
| `end` | `string \| number` | No | `-` | - |
| `exponent` | `string \| number` | No | `-` | - |
| `externalResourcesRequired` | `false \| true \| true \| false` | No | `-` | - |
| `fill` | `string` | No | `-` | The fill color of the point. |
| `fillOpacity` | `string \| number` | No | `-` | - |
| `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
| `filter` | `string` | No | `-` | - |
| `filterRes` | `string \| number` | No | `-` | - |
| `filterUnits` | `string \| number` | No | `-` | - |
| `floodColor` | `string \| number` | No | `-` | - |
| `floodOpacity` | `string \| number` | No | `-` | - |
| `focusable` | `auto \| Booleanish` | No | `-` | - |
| `fontFamily` | `string` | No | `-` | - |
| `fontSize` | `string \| number` | No | `-` | - |
| `fontSizeAdjust` | `string \| number` | No | `-` | - |
| `fontStretch` | `string \| number` | No | `-` | - |
| `fontStyle` | `string \| number` | No | `-` | - |
| `fontVariant` | `string \| number` | No | `-` | - |
| `fontWeight` | `string \| number` | No | `-` | - |
| `format` | `string \| number` | No | `-` | - |
| `fr` | `string \| number` | No | `-` | - |
| `from` | `string \| number` | No | `-` | - |
| `fx` | `string \| number` | No | `-` | - |
| `fy` | `string \| number` | No | `-` | - |
| `g1` | `string \| number` | No | `-` | - |
| `g2` | `string \| number` | No | `-` | - |
| `glyphName` | `string \| number` | No | `-` | - |
| `glyphOrientationHorizontal` | `string \| number` | No | `-` | - |
| `glyphOrientationVertical` | `string \| number` | No | `-` | - |
| `glyphRef` | `string \| number` | No | `-` | - |
| `gradientTransform` | `string` | No | `-` | - |
| `gradientUnits` | `string` | No | `-` | - |
| `hanging` | `string \| number` | No | `-` | - |
| `height` | `string \| number` | No | `-` | - |
| `horizAdvX` | `string \| number` | No | `-` | - |
| `horizOriginX` | `string \| number` | No | `-` | - |
| `href` | `string` | No | `-` | - |
| `id` | `string` | No | `-` | - |
| `ideographic` | `string \| number` | No | `-` | - |
| `imageRendering` | `string \| number` | No | `-` | - |
| `in` | `string` | No | `-` | - |
| `in2` | `string \| number` | No | `-` | - |
| `intercept` | `string \| number` | No | `-` | - |
| `k` | `string \| number` | No | `-` | - |
| `k1` | `string \| number` | No | `-` | - |
| `k2` | `string \| number` | No | `-` | - |
| `k3` | `string \| number` | No | `-` | - |
| `k4` | `string \| number` | No | `-` | - |
| `kernelMatrix` | `string \| number` | No | `-` | - |
| `kernelUnitLength` | `string \| number` | No | `-` | - |
| `kerning` | `string \| number` | No | `-` | - |
| `key` | `Key \| null` | No | `-` | - |
| `keyPoints` | `string \| number` | No | `-` | - |
| `keySplines` | `string \| number` | No | `-` | - |
| `keyTimes` | `string \| number` | No | `-` | - |
| `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Simple text label to display at the point position. If provided, a ChartText will be automatically rendered. |
| `labelProps` | `Omit<ChartTextProps, x \| y \| children>` | No | `-` | Configuration for the automatically rendered label. Only used when label prop is provided. |
| `lang` | `string` | No | `-` | - |
| `lengthAdjust` | `string \| number` | No | `-` | - |
| `letterSpacing` | `string \| number` | No | `-` | - |
| `lightingColor` | `string \| number` | No | `-` | - |
| `limitingConeAngle` | `string \| number` | No | `-` | - |
| `local` | `string \| number` | No | `-` | - |
| `markerEnd` | `string` | No | `-` | - |
| `markerHeight` | `string \| number` | No | `-` | - |
| `markerMid` | `string` | No | `-` | - |
| `markerStart` | `string` | No | `-` | - |
| `markerUnits` | `string \| number` | No | `-` | - |
| `markerWidth` | `string \| number` | No | `-` | - |
| `mask` | `string` | No | `-` | - |
| `maskContentUnits` | `string \| number` | No | `-` | - |
| `maskUnits` | `string \| number` | No | `-` | - |
| `mathematical` | `string \| number` | No | `-` | - |
| `max` | `string \| number` | No | `-` | - |
| `media` | `string` | No | `-` | - |
| `method` | `string` | No | `-` | - |
| `min` | `string \| number` | No | `-` | - |
| `mode` | `string \| number` | No | `-` | - |
| `name` | `string` | No | `-` | - |
| `numOctaves` | `string \| number` | No | `-` | - |
| `offset` | `string \| number` | No | `-` | - |
| `onChange` | `FormEventHandler<SVGCircleElement>` | No | `-` | - |
| `onClick` | `((event: MouseEvent<Element, MouseEvent>, point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when the point is clicked. |
| `onScrubberEnter` | `((point: { x: number; y: number; }) => void)` | No | `-` | Handler for when the scrubber enters this point. |
| `opacity` | `number` | No | `-` | Opacity of the point. |
| `operator` | `string \| number` | No | `-` | - |
| `order` | `string \| number` | No | `-` | - |
| `orient` | `string \| number` | No | `-` | - |
| `orientation` | `string \| number` | No | `-` | - |
| `origin` | `string \| number` | No | `-` | - |
| `overflow` | `string \| number` | No | `-` | - |
| `overlinePosition` | `string \| number` | No | `-` | - |
| `overlineThickness` | `string \| number` | No | `-` | - |
| `paintOrder` | `string \| number` | No | `-` | - |
| `panose1` | `string \| number` | No | `-` | - |
| `path` | `string` | No | `-` | - |
| `pathLength` | `string \| number` | No | `-` | - |
| `patternContentUnits` | `string` | No | `-` | - |
| `patternTransform` | `string \| number` | No | `-` | - |
| `patternUnits` | `string` | No | `-` | - |
| `pixelCoordinates` | `{ x: number; y: number; }` | No | `-` | Coordinates in SVG pixel space. Overrides dataX and dataY for pixel coordinate calculation. |
| `pointerEvents` | `string \| number` | No | `-` | - |
| `points` | `string` | No | `-` | - |
| `pointsAtX` | `string \| number` | No | `-` | - |
| `pointsAtY` | `string \| number` | No | `-` | - |
| `pointsAtZ` | `string \| number` | No | `-` | - |
| `preserveAlpha` | `false \| true \| true \| false` | No | `-` | - |
| `preserveAspectRatio` | `string` | No | `-` | - |
| `primitiveUnits` | `string \| number` | No | `-` | - |
| `r` | `string \| number` | No | `-` | - |
| `radius` | `number` | No | `4` | Radius of the point. |
| `ref` | `null \| string \| (instance: SVGCircleElement \| null) => void \| RefObject<SVGCircleElement>` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
| `refX` | `string \| number` | No | `-` | - |
| `refY` | `string \| number` | No | `-` | - |
| `renderingIntent` | `string \| number` | No | `-` | - |
| `repeatCount` | `string \| number` | No | `-` | - |
| `repeatDur` | `string \| number` | No | `-` | - |
| `requiredExtensions` | `string \| number` | No | `-` | - |
| `requiredFeatures` | `string \| number` | No | `-` | - |
| `restart` | `string \| number` | No | `-` | - |
| `result` | `string` | No | `-` | - |
| `role` | `grid \| article \| button \| dialog \| figure \| form \| img \| link \| main \| menu \| menuitem \| option \| search \| table \| switch \| string & {} \| none \| row \| alert \| alertdialog \| application \| banner \| cell \| checkbox \| columnheader \| combobox \| complementary \| contentinfo \| definition \| directory \| document \| feed \| gridcell \| group \| heading \| list \| listbox \| listitem \| log \| marquee \| math \| menubar \| menuitemcheckbox \| menuitemradio \| navigation \| note \| presentation \| progressbar \| radio \| radiogroup \| region \| rowgroup \| rowheader \| scrollbar \| searchbox \| separator \| slider \| spinbutton \| status \| tab \| tablist \| tabpanel \| term \| textbox \| timer \| toolbar \| tooltip \| tree \| treegrid \| treeitem` | No | `-` | - |
| `rotate` | `string \| number` | No | `-` | - |
| `rx` | `string \| number` | No | `-` | - |
| `ry` | `string \| number` | No | `-` | - |
| `scale` | `string \| number` | No | `-` | - |
| `seed` | `string \| number` | No | `-` | - |
| `shapeRendering` | `string \| number` | No | `-` | - |
| `slope` | `string \| number` | No | `-` | - |
| `spacing` | `string \| number` | No | `-` | - |
| `specularConstant` | `string \| number` | No | `-` | - |
| `specularExponent` | `string \| number` | No | `-` | - |
| `speed` | `string \| number` | No | `-` | - |
| `spreadMethod` | `string` | No | `-` | - |
| `startOffset` | `string \| number` | No | `-` | - |
| `stdDeviation` | `string \| number` | No | `-` | - |
| `stemh` | `string \| number` | No | `-` | - |
| `stemv` | `string \| number` | No | `-` | - |
| `stitchTiles` | `string \| number` | No | `-` | - |
| `stopColor` | `string` | No | `-` | - |
| `stopOpacity` | `string \| number` | No | `-` | - |
| `strikethroughPosition` | `string \| number` | No | `-` | - |
| `strikethroughThickness` | `string \| number` | No | `-` | - |
| `string` | `string \| number` | No | `-` | - |
| `stroke` | `string` | No | `'var(--color-bg)'` | Color of the outer stroke around the point. |
| `strokeDasharray` | `string \| number` | No | `-` | - |
| `strokeDashoffset` | `string \| number` | No | `-` | - |
| `strokeLinecap` | `inherit \| butt \| round \| square` | No | `-` | - |
| `strokeLinejoin` | `inherit \| round \| miter \| bevel` | No | `-` | - |
| `strokeMiterlimit` | `string \| number` | No | `-` | - |
| `strokeOpacity` | `string \| number` | No | `-` | - |
| `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to  0 to remove the stroke. |
| `style` | `CSSProperties` | No | `-` | Custom styles for the point. |
| `styles` | `{ container?: CSSProperties; point?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
| `suppressHydrationWarning` | `boolean` | No | `-` | - |
| `surfaceScale` | `string \| number` | No | `-` | - |
| `systemLanguage` | `string \| number` | No | `-` | - |
| `tabIndex` | `number` | No | `-` | - |
| `tableValues` | `string \| number` | No | `-` | - |
| `target` | `string` | No | `-` | - |
| `targetX` | `string \| number` | No | `-` | - |
| `targetY` | `string \| number` | No | `-` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
| `textAnchor` | `string` | No | `-` | - |
| `textDecoration` | `string \| number` | No | `-` | - |
| `textLength` | `string \| number` | No | `-` | - |
| `textRendering` | `string \| number` | No | `-` | - |
| `to` | `string \| number` | No | `-` | - |
| `transform` | `string` | No | `-` | - |
| `type` | `string` | No | `-` | - |
| `u1` | `string \| number` | No | `-` | - |
| `u2` | `string \| number` | No | `-` | - |
| `underlinePosition` | `string \| number` | No | `-` | - |
| `underlineThickness` | `string \| number` | No | `-` | - |
| `unicode` | `string \| number` | No | `-` | - |
| `unicodeBidi` | `string \| number` | No | `-` | - |
| `unicodeRange` | `string \| number` | No | `-` | - |
| `unitsPerEm` | `string \| number` | No | `-` | - |
| `vAlphabetic` | `string \| number` | No | `-` | - |
| `vHanging` | `string \| number` | No | `-` | - |
| `vIdeographic` | `string \| number` | No | `-` | - |
| `vMathematical` | `string \| number` | No | `-` | - |
| `values` | `string` | No | `-` | - |
| `vectorEffect` | `string \| number` | No | `-` | - |
| `version` | `string` | No | `-` | - |
| `vertAdvY` | `string \| number` | No | `-` | - |
| `vertOriginX` | `string \| number` | No | `-` | - |
| `vertOriginY` | `string \| number` | No | `-` | - |
| `viewBox` | `string` | No | `-` | - |
| `viewTarget` | `string \| number` | No | `-` | - |
| `visibility` | `string \| number` | No | `-` | - |
| `width` | `string \| number` | No | `-` | - |
| `widths` | `string \| number` | No | `-` | - |
| `wordSpacing` | `string \| number` | No | `-` | - |
| `writingMode` | `string \| number` | No | `-` | - |
| `x` | `string \| number` | No | `-` | - |
| `x1` | `string \| number` | No | `-` | - |
| `x2` | `string \| number` | No | `-` | - |
| `xChannelSelector` | `string` | No | `-` | - |
| `xHeight` | `string \| number` | No | `-` | - |
| `xlinkActuate` | `string` | No | `-` | - |
| `xlinkArcrole` | `string` | No | `-` | - |
| `xlinkHref` | `string` | No | `-` | - |
| `xlinkRole` | `string` | No | `-` | - |
| `xlinkShow` | `string` | No | `-` | - |
| `xlinkTitle` | `string` | No | `-` | - |
| `xlinkType` | `string` | No | `-` | - |
| `xmlBase` | `string` | No | `-` | - |
| `xmlLang` | `string` | No | `-` | - |
| `xmlSpace` | `string` | No | `-` | - |
| `xmlns` | `string` | No | `-` | - |
| `xmlnsXlink` | `string` | No | `-` | - |
| `y` | `string \| number` | No | `-` | - |
| `y1` | `string \| number` | No | `-` | - |
| `y2` | `string \| number` | No | `-` | - |
| `yAxisId` | `string` | No | `-` | Optional Y-axis id to specify which axis to plot along. Defaults to the first y-axis |
| `yChannelSelector` | `string` | No | `-` | - |
| `z` | `string \| number` | No | `-` | - |
| `zoomAndPan` | `string` | No | `-` | - |