Vector plot

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/coloraxis.js"></script>
<script src="https://code.highcharts.com/modules/vector.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    A vector plot can visualize vectors using four values:
    The x and y coordinates, the length, and the angle. This
    demo is showing a vector field, where vectors are given at
    regular intervals.
  </p>
</figure>

CSS

#container {
  height: 500px;
}

#csv {
  display: none;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 320px;
  max-width: 700px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Highcharts Vector plot'
  },
  xAxis: {
    min: 0,
    max: 100,
    gridLineWidth: 1
  },
  yAxis: {
    min: 0,
    max: 100
  },
  colorAxis: {
    min: 0,
    max: 360,
    tickInterval: 120,
    minColor: '#0000ff',
    maxColor: '#ff0000'
  },
  series: [{
    type: 'vector',
    name: 'Sample vector field',
    colorKey: 'direction',
    data: [
      [5, 5, 190, 18],
      [5, 10, 185, 27],
      [5, 15, 180, 36],
      [5, 20, 175, 45],
      [5, 25, 170, 54],
      [5, 30, 165, 63],
      [5, 35, 160, 72],
      [5, 40, 155, 81],
      [5, 45, 150, 90],
      [5, 50, 145, 99],
      [5, 55, 140, 108],
      [5, 60, 135, 117],
      [5, 65, 130, 126],
      [5, 70, 125, 135],
      [5, 75, 120, 144],
      [5, 80, 115, 153],
      [5, 85, 110, 162],
      [5, 90, 105, 171],
      [5, 95, 100, 180],
      [10, 5, 185, 27],
      [10, 10, 180, 36],
      [10, 15, 175, 45],
      [10, 20, 170, 54],
      [10, 25, 165, 63],
      [10, 30, 160, 72],
      [10, 35, 155, 81],
      [10, 40, 150, 90],
      [10, 45, 145, 99],
      [10, 50, 140, 108],
      [10, 55, 135, 117],
      [10, 60, 130, 126],
      [10, 65, 125, 135],
      [10, 70, 120, 144],
      [10, 75, 115, 153],
      [10, 80, 110, 162],
      [10, 85, 105, 171],
      [10, 90, 100, 180],
      [10, 95, 95, 189],
      [15, 5, 180, 36],
      [15, 10, 175, 45],
      [15, 15, 170, 54],
      [15, 20, 165, 63],
      [15, 25, 160, 72],
      [15, 30, 155, 81],
      [15, 35, 150, 90],
      [15, 40, 145, 99],
      [15, 45, 140, 108],
      [15, 50, 135, 117],
      [15, 55, 130, 126],
      [15, 60, 125, 135],
      [15, 65, 120, 144],
      [15, 70, 115, 153],
      [15, 75, 110, 162],
      [15, 80, 105, 171],
      [15, 85, 100, 180],
      [15, 90, 95, 189],
      [15, 95, 90, 198],
      [20, 5, 175, 45],
      [20, 10, 170, 54],
      [20, 15, 165, 63],
      [20, 20, 160, 72],
      [20, 25, 155, 81],
      [20, 30, 150, 90],
     ...