Still have questions?
Contact support
You are looking at an outdated 7.11.0 version of this document. Switch to the 7.12.0 version to see the up to date information.

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.

JsFiddle Playground

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"August");
  // rotate marker
  // bound marker to chart's x scale
  // set marker inner color

In the next sample we will highlight summer months.

JsFiddle Playground

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.

JsFiddle Playground

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.

JsFiddle Playground

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