AS Background 08 | samples | Documentation

HTMLcopy

 
<div id="container"></div>

CSScopy

 
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
  // chart type
  var chart = anychart.bar();
​
  // set title
  chart.title("Hatch fill types");
​
  chart.yAxis(false);
​
  // create chart and define data
  var series = chart.bar([
    {
      x: "Backward Diagonal",
      value: 1,
      hatchFill:{
type: "backward-diagonal",
color: "grey"
      }
    },
    {
      x: "Checker board",
      value: 1,
      hatchFill:{
type:"checkerboard",
color: "grey"
      }
    },
    {
      x: "Confetti",
      value: 1,
      hatchFill:{
type:"confetti",
color: "gray"
      }
    },
    {
      x: "Dashed Backward Diagonal",
      value: 1,
      hatchFill:{
type:"dashed-backward-diagonal",
color: "gray"
      }
    },
    {
      x: "Dashed Forward Diagonal",
      value: 1,
      hatchFill:{
type:"dashed-forward-diagonal",
color: "gray"
      }
    },
    {
      x: "Dashed horizontal",
      value: 1,
      hatchFill:{
type:"dashed-horizontal",
color: "gray"
      }
    },
    {
      x: "Dashed vertical",
      value: 1,
      hatchFill:{
type:"dashed-vertical",
color: "gray"
      }
    },
    {
      x: "Diagonal Brick",
      value: 1,
      hatchFill:{
hatchType:"diagonal-brick",
color: "gray"
      }
    },
    {
      x: "Diagonal Cross",
      value: 1,
      hatchFill:{
type:"diagonal-cross",
color: "gray"
      }
    },
    {
      x: "Divot",
      value: 1,
      hatchFill:{
type:"divot",
color: "gray"
      }
    },
    {
      x: "Forward Diagonal",
      value: 1,
      hatchFill:{
type:"forward-diagonal",
color: "gray"
      }
    },
    {
      x: "Grid",
      value: 1,
      hatchFill:{
type:"grid",
color: "gray"
      }
    },
    {
      x: "Horizontal",
      value: 1,
      hatchFill:{
type:"horizontal",
color: "gray"
      }
    },
    {
      x: "Horizontal Brick",
      value: 1,
      hatchFill:{
type:"horizontal-brick",
color: "gray"
      }
    },
    {
      x: "Percent 05",
      value: 1,
      hatchFill:{
type:"percent05",
color: "gray"
      }
    },
    {
      x: "Percent 10",
      value: 1,
      hatchFill:{
type:"percent10",
color: "gray"
      }
    },
    {
      x: "Percent 20",
      value: 1,
      hatchFill:{
type:"percent20",
color: "gray"
      }
    },
    {
      x: "Percent 25",
      value: 1,
      hatchFill:{
type:"percent25",
color: "gray"
      }
    },
    {
      x: "Percent 30",
      value: 1,
      hatchFill:{
type:"percent30",
color: "gray"
      }
    },
    {
      x: "Percent 40",
      value: 1,
      hatchFill:{
type:"percent40",
color: "gray"
      }
    },
    {
      x: "Percent 50",
      value: 1,
      hatchFill:{
type:"percent50",
color: "gray"
      }
    },
    {
      x: "Percent 60",
      value: 1,
      hatchFill:{
type:"percent60",
color: "gray"
      }
    },
    {
      x: "Percent 70",
      value: 1,
      hatchFill:{
type:"percent70",
color: "gray"
      }
    },
    {
      x: "Percent 75",
      value: 1,
      hatchFill:{
type:"percent75",
color: "gray"
      }
    },
    {
      x: "Percent 80",
      value: 1,
      hatchFill:{
type:"percent80",
color: "gray"
      }
    },
    {
      x: "Percent 90",
      value: 1,
      hatchFill:{
type:"percent90",
color: "gray"
      }
    },
    {
      x: "Plaid",
      value: 1,
      hatchFill:{
type:"plaid",
color: "gray"
      }
    },
    {
      x: "Solid Diamond",
      value: 1,
      hatchFill:{
type:"solid-diamond",
color: "gray"
      }
    },
    {
      x: "Vertical",
      value: 1,
      hatchFill:{
type:"vertical",
color: "gray"
      }
    },
    {
      x: "Vertical Brick",
      value: 1,
      hatchFill:{
type:"vertical-brick",
color: "gray"
      }
    },
    {
      x: "Weave",
      value: 1,
      hatchFill:{
type:"weave",
color: "gray"
      }
    },
    {
      x: "Zigzag",
      value: 1,
      hatchFill:{
type:"zigzag",
color: "gray"
      }
    }
  ]);
  series.fill("#FFF");
  series.stroke("#CCC");
  // draw
  chart.container("container");
  chart.draw();
});

Sample meta

AnyChart Documentation