Custom Mark

The custom mark feature of the chart allows users to add custom marks to the chart, such as adding some text, images, line segments, etc.

Configuration interface

The configuration of custom marks is at the top level of the spec and is configured through the mark field.

const spec = {
  customMark: {
    type: T; // Supported types are detailed below
    /** Associated data index */
    dataIndex?: number;
    /** Associated data ID; when this configuration is enabled, dataIndex is invalid */
    dataId?: StringOrNumber;
    /** Chart series mark supported configuration */
    /** User ID */
    id?: StringOrNumber;
    /** Whether to respond to interactions */
    interactive?: boolean;
    /** Hierarchy between other mark elements */
    zIndex?: number;
    /** The mark layer's visibility configuration */
    visible?: boolean;
    /** Default style settings */
    style?: ConvertToMarkStyleSpec<T>;
    /** Style configuration in different states */
    state?: Record<StateValue, IMarkStateSpec<T> | IMarkStateStyleSpec<T>>;
  };
}

In addition to configuring the mark type and optional data, other configuration items are the same as the series mark.

The currently supported mark types are as follows:

• symbol point shape
• rule a line segment that requires specifying the start and end points
• text text
• rect rectangle
• path path
• arc sector
• polygon polygon
• group group, which can place other marks under the group

Usage example

In some scenarios, we may want to display additional information. The following example uses a custom mark to display the year in the data.