Vector Plot Charts

Vector Chart Type and Options

ZingChart vector plots use 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. Use the options object to configure the vector plot data.

{
   type: "vectorplot",
   options: {}

Data

Vector plot 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. It is formatted in the following way: [xPosition, yPosition, length, angle].

{
   type: "vectorplot",
   "options": {
       "data": [
            [5, 5, 190, 18],
            [5, 10, 185, 27],
            [5, 15, 180, 36],
       ]
    }
}

Chart-Specific Properties

Use the options object to configure the vector plot and its arrows.

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.

{
   type: "vectorplot",
   options: {
       arrow: {
            minLength: 12,
            maxLength: 20,
            style: {
                size: 5,
                backgroundColor: "yellow blue"
            }
        },
    }
}

Further Customization

Configure your vector plot chart's appearance through value boxes, tooltips, and a legend.

Value Boxes

Value boxes are not visible on vector plot charts by default. To include them in your chart, add a valueBox object to your plot object. 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.

{
    plot: {
      valueBox: {
        rules: [
          {
            rule: "%v >= 90",
            fontColor: "green"
          },
          {
            rule: "%v >10 && %v < 90",
            visible: false
          },
          {
            rule: "%v <= 10",
            fontColor: "blue"
          }
        ]
      }
    },
}

Tooltips

Tooltips appear when you hover over a data point on your vector plot 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.

Specify what text appears with a text attribute. Place your desired text inside a string. ZingChart tokens, such as %v (scale value) and %t (plot text), can be used here. Style your tooltips (font, background, borders) with attributes such as fontColor, fontFamily, backgroundColor, borderColor, borderWidth, and more.

{
    tooltip: {
      text: "Arrow number %i: %v",
      fontColor: "black",
      fontFamily: "Georgia, serif",
      backgroundColor: "white",
      borderColor: "black",
      borderWidth: 2
    },
}

Legend

To include a legend on your chart, place a legend object in your chart object. You can include attributes to specify your legend's layout, positioning, styling, headers/footers, and more.

{
  type: "vectorplot",
  legend: {}
}