Skip to main content
The Mark Point component marks specific data points in a series with customizable symbols, labels, and positioning. It’s useful for highlighting maximum values, minimum values, averages, or custom data points.

​
Purpose

Mark Point enables visual emphasis of important data points within a chart. From ~/workspace/source/src/component/marker/MarkPointModel.ts, it supports both statistical markers (min, max, average) and custom positioned markers with rich styling options.

​
Basic Usage

option = {
  series: [{
    type: 'line',
    data: [10, 30, 25, 45, 35],
    markPoint: {
      data: [
        {type: 'max', name: 'Maximum'},
        {type: 'min', name: 'Minimum'}
      ]
    }
  }]
}

​
Configuration Options

​
data
array
required
Array of mark point data items. Each item can specify a position, value, or statistical type.
markPoint: {
  data: [
    {type: 'max'},
    {type: 'min'},
    {coord: [2, 35], name: 'Custom Point'},
    {x: '50%', y: '50%', value: 'Center'}
  ]
}
​
symbol
string
default:"'pin'"
Symbol type for mark points. Can be built-in symbols like ‘circle’, ‘rect’, ‘pin’, ‘arrow’, or custom SVG paths.
markPoint: {
  symbol: 'pin',
  data: [{type: 'max'}]
}
​
symbolSize
number | number[]
default:"50"
Size of the symbol. Can be a single number or [width, height].
symbolSize: 40  // Circle with radius 40
symbolSize: [30, 50]  // Width 30, height 50
​
symbolRotate
number
Rotation angle of the symbol in degrees.
​
symbolOffset
number[] | string[]
Offset of the symbol position as [x, y]. Can be absolute values or percentages.
symbolOffset: [10, -20]  // 10px right, 20px up
symbolOffset: ['50%', '0%']  // 50% right
​
precision
number
Decimal precision for automatically calculated values.
​
itemStyle
object
Style of the mark point symbols.
itemStyle: {
  color: '#c23531',
  borderColor: '#fff',
  borderWidth: 2
}
​
label
object
Label configuration for mark points.
​
emphasis
object
Emphasis (hover) state configuration.
emphasis: {
  label: {
    show: true
  },
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

​
Data Item Configuration

Each item in the data array can have the following properties:
​
name
string
required
Name of the mark point, displayed in labels and tooltips.
​
type
'min' | 'max' | 'average' | 'median'
Statistical type for automatic positioning:
  • 'min': Marks the minimum value point
  • 'max': Marks the maximum value point
  • 'average': Marks the average value point
  • 'median': Marks the median value point
​
valueIndex
number
When using type, specifies which dimension to calculate statistics on.
​
valueDim
string
Dimension name for statistical calculation.
​
coord
array
Coordinates for the mark point in the data coordinate system.
{coord: [2, 35], name: 'Point A'}  // x=2, y=35
​
x
number | string
Absolute x position in pixels or percentage.
{x: 100, y: 200, name: 'Fixed Position'}
{x: '50%', y: '50%', name: 'Center'}
​
y
number | string
Absolute y position in pixels or percentage.
​
xAxis
number | string
X coordinate on the x-axis (for Cartesian coordinates).
​
yAxis
number | string
Y coordinate on the y-axis (for Cartesian coordinates).
​
value
number | string
Value to be displayed as the label.
​
symbol
string
Symbol type for this specific mark point (overrides global symbol).
​
symbolSize
number | number[]
Symbol size for this specific mark point.
​
itemStyle
object
Item style for this specific mark point.
​
label
object
Label configuration for this specific mark point.

​
Examples

​
Statistical Mark Points

option = {
  series: [{
    type: 'line',
    data: [10, 30, 25, 45, 35, 20, 40],
    markPoint: {
      data: [
        {
          type: 'max',
          name: 'Max Value',
          label: {
            formatter: 'Max: {c}'
          }
        },
        {
          type: 'min',
          name: 'Min Value',
          label: {
            formatter: 'Min: {c}'
          }
        },
        {
          type: 'average',
          name: 'Average',
          label: {
            formatter: 'Avg: {c}'
          }
        }
      ],
      symbol: 'pin',
      symbolSize: 50
    }
  }]
}

​
Custom Positioned Mark Points

option = {
  series: [{
    type: 'line',
    data: [[0, 10], [1, 30], [2, 25], [3, 45], [4, 35]],
    markPoint: {
      data: [
        {
          coord: [2, 25],
          name: 'Important Point',
          value: 'Key Data',
          symbol: 'circle',
          symbolSize: 60,
          itemStyle: {
            color: '#c23531'
          },
          label: {
            show: true,
            formatter: '{c}'
          }
        },
        {
          xAxis: 3,
          yAxis: 45,
          name: 'Peak',
          symbol: 'pin',
          symbolSize: 50
        }
      ]
    }
  }]
}

​
Styled Mark Points

option = {
  series: [{
    type: 'line',
    data: [120, 132, 101, 134, 90, 230, 210],
    markPoint: {
      symbol: 'circle',
      symbolSize: 50,
      itemStyle: {
        color: 'rgba(194, 53, 49, 0.8)',
        borderColor: '#fff',
        borderWidth: 2,
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.3)',
        shadowOffsetY: 5
      },
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontWeight: 'bold',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true
        },
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      data: [
        {type: 'max', name: 'Maximum'},
        {type: 'min', name: 'Minimum'}
      ]
    }
  }]
}

​
Multiple Series with Different Mark Points

option = {
  series: [
    {
      name: 'Sales',
      type: 'line',
      data: [100, 200, 150, 300, 250],
      markPoint: {
        symbol: 'pin',
        symbolSize: 50,
        data: [
          {type: 'max', name: 'Highest Sales', itemStyle: {color: '#5470c6'}}
        ]
      }
    },
    {
      name: 'Profit',
      type: 'line',
      data: [50, 100, 80, 150, 120],
      markPoint: {
        symbol: 'circle',
        symbolSize: 40,
        data: [
          {type: 'max', name: 'Highest Profit', itemStyle: {color: '#91cc75'}}
        ]
      }
    }
  ]
}

​
Custom Symbol Mark Point

option = {
  series: [{
    type: 'line',
    data: [10, 30, 25, 45, 35],
    markPoint: {
      data: [
        {
          type: 'max',
          name: 'Peak',
          symbol: 'path://M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z',
          symbolSize: 40,
          itemStyle: {
            color: '#ffd700'
          },
          label: {
            position: 'top',
            distance: 10
          }
        }
      ]
    }
  }]
}

​
Implementation Details

From ~/workspace/source/src/component/marker/MarkPointModel.ts:59-97, the Mark Point component:
  • Z-index: Defaults to 5, ensuring mark points appear above series data
  • Default Symbol: Uses ‘pin’ symbol by default
  • Tooltip: Supports item-based tooltips
  • Labels: Shows labels inside symbols by default
  • Border: Default border width of 2 pixels
  • Parent Component: Extends MarkerModel base class from ~/workspace/source/src/component/marker/MarkerModel.ts
  • Series Integration: Automatically attaches to parent series
  • Statistical Calculation: Supports min, max, average, and median calculations on any dimension

Build docs developers (and LLMs) love

Get started for freeTalk to us