Crosshair

Crosshair, translated into Chinese as a crosshair, is used to mark points in the chart and add text labels. In different coordinate systems, the performance of the crosshair will be different. In VChart, crosshair is disabled by default, and users can enable it through the crosshair configuration. This tutorial mainly explains the concepts and composition of crosshair. For more detailed configuration and examples of crosshair, please refer to the Configuration document and Example pages.

Components

Crosshair marks data points by displaying a line connecting the data points and the coordinate axis. Additionally, text labels can be added to the line to display the specific values of the data points.

In the Cartesian coordinate system, crosshair is composed of a set of vertical and horizontal lines or rectangular frames, as shown in the figure below:

In the polar coordinate system, crosshair is composed of a set of arcs, rays, or sectors to mark the data points at the mouse's position. Crosshairs on the radial axis consist of a set of arcs, while crosshairs on the angular axis consist of a set of rays or sectors, as shown in the figure below:

Configuration

In VChart, the configuration item of crosshair is associated with the axis field and varies depending on the coordinate system. Next, we will discuss the configuration and usage of crosshair in different coordinate systems.

• In the Cartesian coordinate system, the crosshair configuration item is as follows:

 {
    "crosshair": {
      "xField": {
        "visible": true,
        "label": {
          "visible": false
        }
      },
      "yField": {
        "visible": false
      }
    }
  }

• In the polar coordinate system, the crosshair configuration item is as follows, we need to associate the category field and the value field:

{
  "crosshair": {
    "categoryField": {
      "visible": true,
      "label": {
        "visible": false
      }
    },
    "valueField": {
      "visible": false
    }
  }
}

We will now discuss the configuration and usage of crosshair in different coordinate systems.

Examples

Cartesian Coordinate System

In the Cartesian coordinate system, crosshairs are displayed as a group of intersecting vertical and horizontal lines, used to mark the data points at the position of the mouse. The example is as follows:

Polar Coordinate System

In the polar coordinate system, Crosshair consists of a set of arcs, rays, or sectors to mark the data points at the position of the mouse. The crosshair on the radial axis consists of a set of arcs, while the crosshair on the angular axis consists of a set of rays or sectors. The example is as follows:

Multi-region Association

When multiple regions are present, we can configure the bindingAxesIndex property to bind the crosshair to specified coordinate axes to implement long annotation lines that span multiple regions.

With the examples above, users should be able to grasp the configuration and usage methods of crosshair in VChart. In practical applications, you can further customize the crosshair style, labels, and other according to the requirements, enhancing the expressiveness of the chart.