Element hatch fill


Some color printers print colors unpredictable and very often it is hard to identify similar colors. Also it is impossible to identify colors on prints of b/w (monochrome) printers and in e-books. AnyChart has very useful feature - hatch fills, ideal for differentiating elements for black and white display or for those who are color blind.

Hatch fill presets

We provide several preset hatch fills, full list is available in the API reference.

To create a hatch fill you simply set the required string constant:


JsFiddle Playground

Color settings

If needed you, can color the hatch, using Hex, RGB, HSL or HTML color name with the opacity. Color opacity can be set in two ways:

  • RGBA, HSLA modificators;
  • Dedicated parameter:
    • Call function with the parameters fill(color, opacity);
    • Single value fill('color opacity') (one string value separated by space).
    .hatchFill('diamiond', '#CC8800 0.8');

JsFiddle Playground

Thickness settings

Hatch lines thickness is set using thickness parameter:

    .hatchFill(hatchType, color, thickness);

JsFiddle Playground

Size settings

Also, you can modify hatch using size parameter, which changes the size of the pattern:

    .hatchFill(hatchType, color, thickness, size);

JsFiddle Playground

Pattern settings

If you are not satisfied with presets, you can create your own pattern, here an example:

  // initialize pattern
  var pattern = stage.pattern(new acgraph.math.Rect(0,0,stage.width(),stage.height()));
  // circles settings
  var circles = {
    cx: stage.width()/2,
    cy: stage.height()/2,
    step : 5
  var max_circle_radius = Math.max(stage.width(), stage.height())/2;
  // draw circles
  for (var i = 0; i < max_circle_radius; i++){
    pattern.circle(circles.cx, circles.cy, circles.step*i).fill('none').stroke('1 blue 0.9');

JsFiddle Playground

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