Range Markers


Range Markers (sometimes referred as areas or zones) are colored areas bound to a chart axis. These areas are useful when you need to highlight some value(s) on axis. You can add Range Markers on any axis, both x axis, y axis and additional axis. You can add text markers to any place of a chart. You can also place Text Markers to show Text and Line Markers to show Lines.


To add range marker you need to use rangeMarker() method. By default this method creates a marker on a primary y axis. You can bind the marker to another axis using axis() method. The basic range marker's properties can be set using from(), to() and fill() methods.

  // y axis getter
  var yAxis = chart.yAxis();

  // create range marker
  var marker = chart.rangeMarker();
  // set start point of the marker
  // set end point of the marker
  // set marker inner color
  // set axis

Using horizontal range marker let's highlights unsatisfactory result and using vertical range marker we can highlight summer months.


Advanced Layout

In some cases you may need to customize your marker's emplacement. The layout() method can set horizontal or vertical placement. When a marker is bind to an axis using axis() method the marker's layout is defined to be perpendicular to the axis' orientation.

Advanced Option

Along with binding marker to an axis, it is possible to use a scale for marker positioning. The scale for the marker can be defined using scale() method. As far as scales don't have any layout you need to define layout for the marker using layout() method.

Note: if you define neither scale() nor axis() the marker will be bound to the primary y axis.

  // create range marker
  var marker = chart.rangeMarker();
  // set start point of the marker
  // set end point of the marker
  // rotate marker
  // bound marker to chart's x scale
  // set marker inner color

In the next sample we will highlight summer months.


Range and Text Markers

Combination of range and text markers may be very useful to emphasize certain information or to set a comment or mark some data.


Advanced Visualization

You can use fill()method to control the inner color of the marker. Note, that this method can be used to set gradient and image inner color for your marker.

  // create range marker
  var rangeMarker = chart.rangeMarker();
  // bind marker to scale
  // set range start point
  // set end point of the range
  // range color settings
    // set gradient inner colors and positions
    keys: [".1 #009900", ".5 #ffa000", ".9 #dd2c00"],
    // set filling angle
    angle: -90,
    // set colors opacity
    opacity: 0.5

Sample below shows semitransparent filled range.


Note: more information on advanced color settings can be found in Fill Settings tutorial

You are looking at an outdated v7 version of this document. Switch to the v8 version to see the up to date information.