Vectorplot Charts

Overview

A vectorplot chart or vectorplot graph. They are highly useful for viewing vector fields, and ZingChart offers JavaScript vectorplot charts that are highly customizable to meet your individual charting needs. Browse our ZingChart Gallery for additional ideas on what you can achieve with our scatter charts.

Type and Options

ZingChart vectorplot uses the type attribute and the options object. In your chart object, add a type attribute and set the value to vectorplot. Next, create an options object.

Options Configuration

Use the options object to configure the vectorplot and its arrows with the following properties.

Data

Vectorplot charts use data added via a data array inside of the options object. Each sub-array in the data array represents a vector that will be drawn on the chart, and it is formatted in the following way, [xPosition, yPosition, length, angle]. Below is an example illustrating how to add vectors to the vectorplot chart.

https://app.zingsoft.com/demos/embed/L2OSJPMM
https://app.zingsoft.com/demos/embed/L2OSJPMM
{
   type: "vectorplot",
  	title: {
    	text: 'Vectorplot Data'
    },
    "globals": {
        "fontFamily": "Lucida Sans Unicode"
    },
    "plotarea": {
        "margin": "dynamic"
    },
    "options": {
        "arrow": {
            "min-length": 6,
            "max-length": 12,
            "style": {
                "size": 3,
                "background-color": "#333"
            }
        },
        "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]
        ]
    }
}

Arrow

The arrow object allows you to control the minimum and maximum length, and the style of the arrows. To style the arrows, use a style object and the appropriate attributes such as size and backgroundColor.

https://app.zingsoft.com/demos/embed/LN484VF3
https://app.zingsoft.com/demos/embed/LN484VF3
{
   type: "vectorplot",
  	title: {
    	text: 'Vectorplot Data'
    },
    plotarea: {
        margin: "dynamic"
    },
    options: {
        arrow: {
            minLength: 12,
            maxLength: 20,
            style: {
                size: 5,
                backgroundColor: "yellow blue"
            }
        },
        data: arrowData
    }
}

Further Customization

You can also configure your vectorplot chart's appearance through value boxes, tooltips, and a legend.

Value Boxes

Value boxes are not visible on vectorplot charts by default. To include them in your chart, add a valueBox object to your plotobject. You can style and format them, as well as incorporate rules to force certain value boxes to show under certain conditions (e.g., to highlight outliers, notable data points, or minimum/maximum values). In the example chart below, rules were used to display values greater than or equal to 90 and less than or equal to 10. Read more on rules and tokens in our Logic Rules and JavaScript Tokens tutorials. Browse our JSON Attributes/Syntax page for Value Boxes for further customization options.

https://app.zingsoft.com/demos/embed/0YD3S6S3
https://app.zingsoft.com/demos/embed/0YD3S6S3
{
    type: "vectorplot",
    plot: {
      valueBox: {
        rules: [
          {
            rule: "%v >= 90",
            fontColor: "green"
          },
          {
            rule: "%v >10 && %v < 90",
            visible: false
          },
          {
            rule: "%v <= 10",
            fontColor: "blue"
          }
        ]
      }
    },
    plotarea: {
        margin: "dynamic"
    },
    options: {
        arrow: {
            minLength: 6,
            maxLength: 12,
            style: {
                size: 3,
                backgroundColor: "#000"
            }
        },
        data: arrowData
    }
}

Tooltips

Tooltips appear when you hover over a data point on your vectorplot chart. To customize and style them, add a tooltip object to your chart object. You can turn their visibility on or off with a visible attribute. Set the value to true (default) or false. You can also specify what text appears with a text attribute. Place your desired text inside a string. ZingChart tokens such as %vand %t can be used here. And you can style your tooltips (font, background, borders) with attributes such as fontColor, fontFamily, backgroundColor, borderColor, borderWidth, and more. See our Tooltips JSON Attributes/Syntax page for a full list of styling options.

https://app.zingsoft.com/demos/embed/RYFD0AB5
https://app.zingsoft.com/demos/embed/RYFD0AB5
{
    type: "vectorplot",
    tooltip: {
      text: "Arrow number %i: %v",
      fontColor: "black",
      fontFamily: "Georgia, serif",
      backgroundColor: "white",
      borderColor: "black",
      borderWidth: 2
    },
    plotarea: {
        margin: "dynamic"
    },
    options: {
        arrow: {
            minLength: 6,
            maxLength: 12,
            style: {
                size: 3,
                backgroundColor: "#000"
            }
        },
        data: arrowData
    }
}

Summary

Got a question about how vectorplot charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.