Vector field charts display a vector (direction and magnitude) at each point of a grid or dataset. Each vector is drawn as an arrow where the angle indicates direction and the length indicates magnitude. They are used extensively in physics, meteorology, fluid dynamics, and machine learning to visualize force fields, wind patterns, gradients, and other directional phenomena.

Subtype

▾

Live Preview

x	y
-4	-4
-4	-3
-4	-2
-4	-1
-4	0
-4	1
-4	2
-4	3
-4	4
-3	-4

{
  "data": [
    {
      "x": -4,
      "y": -4,
      "dx": 0.7060045096182077,
      "dy": -0.7060045096182077
    },
    {
      "x": -4,
      "y": -3,
      "dx": 0.5988035880418494,
      "dy": -0.7984047840557992
    },
    {
      "x": -4,
      "y": -2,
      "dx": 0.4460997367454705,
      "dy": -0.892199473490941
    },
    {
      "x": -4,
      "y": -1,
      "dx": 0.2418254167033372,
      "dy": -0.9673016668133488
    },
    {
      "x": -4,
      "y": 0,
      "dx": 0,
      "dy": -0.9968895725584536
    },
    {
      "x": -4,
      "y": 1,
      "dx": -0.2418254167033372,
      "dy": -0.9673016668133488
    },
    {
      "x": -4,
      "y": 2,
      "dx": -0.4460997367454705,
      "dy": -0.892199473490941
    },
    {
      "x": -4,
      "y": 3,
      "dx": -0.5988035880418494,
      "dy": -0.7984047840557992
    },
    {
      "x": -4,
      "y": 4,
      "dx": -0.7060045096182077,
      "dy": -0.7060045096182077
    },
    {
      "x": -3,
      "y": -4,
      "dx": 0.7984047840557992,
      "dy": -0.5988035880418494
    },
    {
      "x": -3,
      "y": -3,
      "dx": 0.7051507420834027,
      "dy": -0.7051507420834027
    },
    {
      "x": -3,
      "y": -2,
      "dx": 0.5525789639955376,
      "dy": -0.8288684459933066
    },
    {
      "x": -3,
      "y": -1,
      "dx": 0.3146583877637763,
      "dy": -0.9439751632913289
    },
    {
      "x": -3,
      "y": 0,
      "dx": 0,
      "dy": -0.9944903161976938
    },
    {
      "x": -3,
      "y": 1,
      "dx": -0.3146583877637763,
      "dy": -0.9439751632913289
    },
    {
      "x": -3,
      "y": 2,
      "dx": -0.5525789639955376,
      "dy": -0.8288684459933066
    },
    {
      "x": -3,
      "y": 3,
      "dx": -0.7051507420834027,
      "dy": -0.7051507420834027
    },
    {
      "x": -3,
      "y": 4,
      "dx": -0.7984047840557992,
      "dy": -0.5988035880418494
    },
    {
      "x": -2,
      "y": -4,
      "dx": 0.892199473490941,
      "dy": -0.4460997367454705
    },
    {
      "x": -2,
      "y": -3,
      "dx": 0.8288684459933066,
      "dy": -0.5525789639955376
    },
    {
      "x": -2,
      "y": -2,
      "dx": 0.7027283689263065,
      "dy": -0.7027283689263065
    },
    {
      "x": -2,
      "y": -1,
      "dx": 0.4428074427700477,
      "dy": -0.8856148855400954
    },
    {
      "x": -2,
      "y": 0,
      "dx": 0,
      "dy": -0.9877295966495897
    },
    {
      "x": -2,
      "y": 1,
      "dx": -0.4428074427700477,
      "dy": -0.8856148855400954
    },
    {
      "x": -2,
      "y": 2,
      "dx": -0.7027283689263065,
      "dy": -0.7027283689263065
    },
    {
      "x": -2,
      "y": 3,
      "dx": -0.8288684459933066,
      "dy": -0.5525789639955376
    },
    {
      "x": -2,
      "y": 4,
      "dx": -0.892199473490941,
      "dy": -0.4460997367454705
    },
    {
      "x": -1,
      "y": -4,
      "dx": 0.9673016668133488,
      "dy": -0.2418254167033372
    },
    {
      "x": -1,
      "y": -3,
      "dx": 0.9439751632913289,
      "dy": -0.3146583877637763
    },
    {
      "x": -1,
      "y": -2,
      "dx": 0.8856148855400954,
      "dy": -0.4428074427700477
    },
    {
      "x": -1,
      "y": -1,
      "dx": 0.6900655593423541,
      "dy": -0.6900655593423541
    },
    {
      "x": -1,
      "y": 0,
      "dx": 0,
      "dy": -0.9534625892455922
    },
    {
      "x": -1,
      "y": 1,
      "dx": -0.6900655593423541,
      "dy": -0.6900655593423541
    },
    {
      "x": -1,
      "y": 2,
      "dx": -0.8856148855400954,
      "dy": -0.4428074427700477
    },
    {
      "x": -1,
      "y": 3,
      "dx": -0.9439751632913289,
      "dy": -0.3146583877637763
    },
    {
      "x": -1,
      "y": 4,
      "dx": -0.9673016668133488,
      "dy": -0.2418254167033372
    },
    {
      "x": 0,
      "y": -4,
      "dx": 0.9968895725584536,
      "dy": 0
    },
    {
      "x": 0,
      "y": -3,
      "dx": 0.9944903161976938,
      "dy": 0
    },
    {
      "x": 0,
      "y": -2,
      "dx": 0.9877295966495897,
      "dy": 0
    },
    {
      "x": 0,
      "y": -1,
      "dx": 0.9534625892455922,
      "dy": 0
    },
    {
      "x": 0,
      "y": 0,
      "dx": 0,
      "dy": 0
    },
    {
      "x": 0,
      "y": 1,
      "dx": -0.9534625892455922,
      "dy": 0
    },
    {
      "x": 0,
      "y": 2,
      "dx": -0.9877295966495897,
      "dy": 0
    },
    {
      "x": 0,
      "y": 3,
      "dx": -0.9944903161976938,
      "dy": 0
    },
    {
      "x": 0,
      "y": 4,
      "dx": -0.9968895725584536,
      "dy": 0
    },
    {
      "x": 1,
      "y": -4,
      "dx": 0.9673016668133488,
      "dy": 0.2418254167033372
    },
    {
      "x": 1,
      "y": -3,
      "dx": 0.9439751632913289,
      "dy": 0.3146583877637763
    },
    {
      "x": 1,
      "y": -2,
      "dx": 0.8856148855400954,
      "dy": 0.4428074427700477
    },
    {
      "x": 1,
      "y": -1,
      "dx": 0.6900655593423541,
      "dy": 0.6900655593423541
    },
    {
      "x": 1,
      "y": 0,
      "dx": 0,
      "dy": 0.9534625892455922
    },
    {
      "x": 1,
      "y": 1,
      "dx": -0.6900655593423541,
      "dy": 0.6900655593423541
    },
    {
      "x": 1,
      "y": 2,
      "dx": -0.8856148855400954,
      "dy": 0.4428074427700477
    },
    {
      "x": 1,
      "y": 3,
      "dx": -0.9439751632913289,
      "dy": 0.3146583877637763
    },
    {
      "x": 1,
      "y": 4,
      "dx": -0.9673016668133488,
      "dy": 0.2418254167033372
    },
    {
      "x": 2,
      "y": -4,
      "dx": 0.892199473490941,
      "dy": 0.4460997367454705
    },
    {
      "x": 2,
      "y": -3,
      "dx": 0.8288684459933066,
      "dy": 0.5525789639955376
    },
    {
      "x": 2,
      "y": -2,
      "dx": 0.7027283689263065,
      "dy": 0.7027283689263065
    },
    {
      "x": 2,
      "y": -1,
      "dx": 0.4428074427700477,
      "dy": 0.8856148855400954
    },
    {
      "x": 2,
      "y": 0,
      "dx": 0,
      "dy": 0.9877295966495897
    },
    {
      "x": 2,
      "y": 1,
      "dx": -0.4428074427700477,
      "dy": 0.8856148855400954
    },
    {
      "x": 2,
      "y": 2,
      "dx": -0.7027283689263065,
      "dy": 0.7027283689263065
    },
    {
      "x": 2,
      "y": 3,
      "dx": -0.8288684459933066,
      "dy": 0.5525789639955376
    },
    {
      "x": 2,
      "y": 4,
      "dx": -0.892199473490941,
      "dy": 0.4460997367454705
    },
    {
      "x": 3,
      "y": -4,
      "dx": 0.7984047840557992,
      "dy": 0.5988035880418494
    },
    {
      "x": 3,
      "y": -3,
      "dx": 0.7051507420834027,
      "dy": 0.7051507420834027
    },
    {
      "x": 3,
      "y": -2,
      "dx": 0.5525789639955376,
      "dy": 0.8288684459933066
    },
    {
      "x": 3,
      "y": -1,
      "dx": 0.3146583877637763,
      "dy": 0.9439751632913289
    },
    {
      "x": 3,
      "y": 0,
      "dx": 0,
      "dy": 0.9944903161976938
    },
    {
      "x": 3,
      "y": 1,
      "dx": -0.3146583877637763,
      "dy": 0.9439751632913289
    },
    {
      "x": 3,
      "y": 2,
      "dx": -0.5525789639955376,
      "dy": 0.8288684459933066
    },
    {
      "x": 3,
      "y": 3,
      "dx": -0.7051507420834027,
      "dy": 0.7051507420834027
    },
    {
      "x": 3,
      "y": 4,
      "dx": -0.7984047840557992,
      "dy": 0.5988035880418494
    },
    {
      "x": 4,
      "y": -4,
      "dx": 0.7060045096182077,
      "dy": 0.7060045096182077
    },
    {
      "x": 4,
      "y": -3,
      "dx": 0.5988035880418494,
      "dy": 0.7984047840557992
    },
    {
      "x": 4,
      "y": -2,
      "dx": 0.4460997367454705,
      "dy": 0.892199473490941
    },
    {
      "x": 4,
      "y": -1,
      "dx": 0.2418254167033372,
      "dy": 0.9673016668133488
    },
    {
      "x": 4,
      "y": 0,
      "dx": 0,
      "dy": 0.9968895725584536
    },
    {
      "x": 4,
      "y": 1,
      "dx": -0.2418254167033372,
      "dy": 0.9673016668133488
    },
    {
      "x": 4,
      "y": 2,
      "dx": -0.4460997367454705,
      "dy": 0.892199473490941
    },
    {
      "x": 4,
      "y": 3,
      "dx": -0.5988035880418494,
      "dy": 0.7984047840557992
    },
    {
      "x": 4,
      "y": 4,
      "dx": -0.7060045096182077,
      "dy": 0.7060045096182077
    }
  ],
  "series": [
    {
      "type": "vectorfield",
      "xKey": "x",
      "yKey": "y",
      "dxKey": "dx",
      "dyKey": "dy",
      "arrowColor": "#6366f1",
      "scaleFactor": 0.4
    }
  ],
  "title": {
    "text": "Rotational Vector Field"
  }
}

Edit JSON above · auto-previews after 0.9 s

A vector field chart places arrows at grid points where each arrow indicates direction (angle) and magnitude (length). This example shows a simple rotational flow pattern.

PreviousSurface Plots (3D)Next Smith Charts

Was this article helpful?

Radiant Charts

Now open source! Compare Radiant vs Chart.js, ECharts, AG Grid & more →

Radiant Charts Help Center

Knowledge Base/Scientific/Vector Field Charts

Data Grid

Overview Getting Started Column Definitions Sorting & Filtering Cell Renderers Pivot Mode

Core Interactions

Getting Started Installation Theming Licensing & Offline Keys Tooltips

Chart Types

Categorical

Part to Whole

Pie Charts Donut Charts Treemap Charts Circle Packing Icicle Charts Dendrograms Waffle Charts Sunburst Charts

Distribution

Histogram BoxPlot Charts Ridgeline Plots Beeswarm Plots Strip Plots ECDF Charts KDE Plots QQ Plots Pareto Charts Error Bar Control Chart Violin Plots Statistical Charts

Relationship

Scatter Charts Bubble Charts Density Contours Hexbin Charts Ternary Plots Venn Diagrams

Flow & Networks

Waterfall Charts Funnel Charts Sankey Diagrams Alluvial Diagrams Arc Diagrams Chord Diagrams Dependency Wheel Gantt Charts Force Graphs Streamgraph

Specialized

Geospatial

Choropleth Maps Bubble Map Flow Maps Bivariate Choropleth Maps Cartograms Dot Density Maps

Comparison

Range Bar Chart Grouped Stacked Bar

Interaction

Advanced Interactivity

Part-to-Whole

Pictogram Charts

Statistical

Scatterplot Matrix (SPLOM)Stem & Leaf Plots Rug Plots Population Pyramids Fan Charts Voronoi Diagrams

Financial

Depth Charts Heikin-Ashi Charts Kagi Charts

Scientific

Surface Plots (3D)Vector Field Charts Smith Charts Bode Plots Nyquist Plots Piper Diagrams Wind Rose Charts

Flow

Parallel Sets

Vector Field Charts