Range Markers

• Overview
• Declare
• Advanced Layout
  • Advanced Option
• Range and Text Markers
• Advanced Visualization

Overview

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.

Declare

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
  marker.from(0);
  // set end point of the marker
  marker.to(10000);
  // set marker inner color
  marker.fill("#fcd8d7");
  // set axis
  marker.axis(yAxis);

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
  marker.from("June");
  // set end point of the marker
  marker.to("August");
  // rotate marker
  marker.layout("vertical");
  // bound marker to chart's x scale
  marker.scale(chart.xScale());
  // set marker inner color
  marker.fill("#d7fcda");

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
  rangeMarker.axis(chart.yAxis());
  // set range start point
  rangeMarker.from(0);
  // set end point of the range
  rangeMarker.to(30000);
  // range color settings
  rangeMarker.fill({
    // 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