Docs Charts Primitives

Drag

import { Drag } from "@grassroot/charts-react";
 
export default function DragDemo() {
  return (
    <div>
      <svg
        viewBox="0 0 360 220"
        width="360"
        height="220"
        style={{ maxWidth: "100%" }}
        role="img"
        aria-label="Quarterly revenue actual and forecast markers with drag capture, 2026"
      >
        <title>Quarterly revenue forecast markers</title>
        <line x1={32} y1={154} x2={328} y2={154} stroke="var(--vs-chart-axis)" />
        <circle cx={120} cy={118} r={7} fill="var(--vs-neutral-400)" />
        <text x={72} y={108} fontSize={12} fill="var(--vs-chart-ink)">
          Q2 · £2.1m
        </text>
        <Drag aria-label="Q3 forecast marker drag area">
          <circle cx={236} cy={92} r={10} fill="var(--accent)" />
        </Drag>
        <text x={248} y={80} fontSize={12} fill="var(--vs-chart-ink)">
          Q3 forecast · £2.4m
        </text>
        <Drag aria-label="Q4 forecast marker drag area">
          <circle cx={300} cy={64} r={10} fill="var(--vs-success)" />
        </Drag>
        <text x={232} y={48} fontSize={12} fill="var(--vs-chart-ink)">
          Q4 forecast · £2.7m
        </text>
      </svg>
    </div>
  );
}

<script setup lang="ts">
import { Drag } from "@grassroot/charts-vue";
</script>
 
<template>
  <svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Quarterly revenue actual and forecast markers with drag capture, 2026"
  >
    <title>Quarterly revenue forecast markers</title>
    <line x1="32" y1="154" x2="328" y2="154" stroke="var(--vs-chart-axis)" />
    <circle cx="120" cy="118" r="7" fill="var(--vs-neutral-400)" />
    <text x="72" y="108" font-size="12" fill="var(--vs-chart-ink)">Q2 · £2.1m</text>
    <Drag aria-label="Q3 forecast marker drag area">
      <circle cx="236" cy="92" r="10" fill="var(--accent)" />
    </Drag>
    <text x="248" y="80" font-size="12" fill="var(--vs-chart-ink)">Q3 forecast · £2.4m</text>
    <Drag aria-label="Q4 forecast marker drag area">
      <circle cx="300" cy="64" r="10" fill="var(--vs-success)" />
    </Drag>
    <text x="232" y="48" font-size="12" fill="var(--vs-chart-ink)">Q4 forecast · £2.7m</text>
  </svg>
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDrag } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-drag-chart-demo",
  standalone: true,
  imports: [GrassrootDrag],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Quarterly revenue actual and forecast markers with drag capture, 2026"
  >
    <title>Quarterly revenue forecast markers</title>
    <line x1="32" y1="154" x2="328" y2="154" stroke="var(--vs-chart-axis)" />
    <circle cx="120" cy="118" r="7" fill="var(--vs-neutral-400)" />
    <text x="72" y="108" font-size="12" fill="var(--vs-chart-ink)">Q2 · £2.1m</text>
    <g grassroot-drag aria-label="Q3 forecast marker drag area">
      <circle cx="236" cy="92" r="10" fill="var(--accent)" />
    </g>
    <text x="248" y="80" font-size="12" fill="var(--vs-chart-ink)">Q3 forecast · £2.4m</text>
    <g grassroot-drag aria-label="Q4 forecast marker drag area">
      <circle cx="300" cy="64" r="10" fill="var(--vs-success)" />
    </g>
    <text x="232" y="48" font-size="12" fill="var(--vs-chart-ink)">Q4 forecast · £2.7m</text>
  </svg>`,
})
export class DragDemoComponent {}
 
export default DragDemoComponent;

<script lang="ts">
  import { Drag } from "@grassroot/charts-svelte";
</script>
 
<svg
  viewBox="0 0 360 220"
  width="360"
  height="220"
  style="max-width: 100%"
  role="img"
  aria-label="Quarterly revenue actual and forecast markers with drag capture, 2026"
>
  <title>Quarterly revenue forecast markers</title>
  <line x1="32" y1="154" x2="328" y2="154" stroke="var(--vs-chart-axis)" />
  <circle cx="120" cy="118" r="7" fill="var(--vs-neutral-400)" />
  <text x="72" y="108" font-size="12" fill="var(--vs-chart-ink)">Q2 · £2.1m</text>
  <Drag aria-label="Q3 forecast marker drag area">
    <circle cx="236" cy="92" r="10" fill="var(--accent)" />
  </Drag>
  <text x="248" y="80" font-size="12" fill="var(--vs-chart-ink)">Q3 forecast · £2.4m</text>
  <Drag aria-label="Q4 forecast marker drag area">
    <circle cx="300" cy="64" r="10" fill="var(--vs-success)" />
  </Drag>
  <text x="232" y="48" font-size="12" fill="var(--vs-chart-ink)">Q4 forecast · £2.7m</text>
</svg>

/** @jsxImportSource solid-js */
import { Drag } from "@grassroot/charts-solid";
 
export default function DragDemo() {
  return (
    <svg
      viewBox="0 0 360 220"
      width="360"
      height="220"
      style={{ "max-width": "100%" }}
      role="img"
      aria-label="Quarterly revenue actual and forecast markers with drag capture, 2026"
    >
      <title>Quarterly revenue forecast markers</title>
      <line x1="32" y1="154" x2="328" y2="154" stroke="var(--vs-chart-axis)" />
      <circle cx="120" cy="118" r="7" fill="var(--vs-neutral-400)" />
      <text x="72" y="108" font-size="12" fill="var(--vs-chart-ink)">
        Q2 · £2.1m
      </text>
      <Drag aria-label="Q3 forecast marker drag area">
        <circle cx="236" cy="92" r="10" fill="var(--accent)" />
      </Drag>
      <text x="248" y="80" font-size="12" fill="var(--vs-chart-ink)">
        Q3 forecast · £2.4m
      </text>
      <Drag aria-label="Q4 forecast marker drag area">
        <circle cx="300" cy="64" r="10" fill="var(--vs-success)" />
      </Drag>
      <text x="232" y="48" font-size="12" fill="var(--vs-chart-ink)">
        Q4 forecast · £2.7m
      </text>
    </svg>
  );
}

Installation

API Reference

Import

import { Drag } from "@grassroot/charts-react";

Props

Prop

Type

Default

Requirement

onDragMove

((point: { x: number; y: number; }) => void) | undefined

—

optional

Prop: onDragMove
Type: ((point: { x: number; y: number; }) => void) | undefined
Default: —
Requirement: optional

Events

Event	Payload
`onDragMove`	`((point: { x: number; y: number; }) => void) \| undefined`

Content regions

children

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { Drag } from "@grassroot/charts-vue";

Events

Event	Payload
`dragMove`	`[point: { x: number; y: number }]`

Content regions

default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDrag } from "@grassroot/charts-angular";

Events

Event	Payload
`dragMove`	`{ x: number; y: number }`

Content regions

default

Import

import { Drag } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

onDragMove

(point: { x: number; y: number }) => void

—

optional

class

string

—

optional

Prop: onDragMove
Type: (point: { x: number; y: number }) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onDragMove`	`(point: { x: number; y: number }) => void`

Content regions

children

Import

import { Drag } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

onDragMove

(point: { x: number; y: number }) => void

—

optional

Prop: onDragMove
Type: (point: { x: number; y: number }) => void
Default: —
Requirement: optional

Events

Event	Payload
`onDragMove`	`(point: { x: number; y: number }) => void`

Content regions

children

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.