html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // data set

  var data = [

    ["P1", 16, 20],

    ["P2", 12, 18],

    ["P3", 9, 14]

  ];

​

  // create stage

  var stage = anychart.graphics.create("container");

​

  //  main title

  var title = anychart.standalones.title();

  title.parentBounds(0, 0, stage.width(), stage.height()*0.1);

  title.text("Background Stroke Types");

  title.container(stage);

  title.draw();

​

​

  // Chart with red solid stroke

  var chart_1 = anychart.column();

​

  // setting title

  chart_1.title("Solid Stroke");

​

  // setting stroke for chart contaoner. It has solid type by default

  chart_1.background().stroke("5 red");

​

  // setting position and bounds

  chart_1.bounds(0, "10%", "45%", "40%");

​

  // disabling titles, labels and all ticks for Axes

  chart_1.yAxis(false);

  chart_1.xAxis(false);

​

  // setting data series

  chart_1.data(data);

​

  // set container and draw

  chart_1.container(stage);

  chart_1.draw();

​

​

  // chart with gradient stroke

  var chart_2 = anychart.column();

  chart_2.title("Gradient Stroke");

  chart_2.bounds("55%", "10%", "45%", "40%");

  // adjust stroke type and set color keys

  chart_2.background().stroke({

    // set colors position

    keys: [".1 red", ".5 yellow", ".9 blue"],

    // set angle of colors drawing

    angle: 45,

    // set stroke thickness

    thickness: 5

  });

​

  // disabling titles, labels and all ticks for Axes

  chart_2.yAxis(false);

  chart_2.xAxis(false);

​

  // set series data

  chart_2.data(data);

​

  // set container and draw

  chart_2.container(stage);

  chart_2.draw();

​

​

  // chart with dashed stroke

  var chart_3 = anychart.column();

  chart_3.title("Dashed Stroke");

  chart_3.bounds(0, "60%", "45%", "40%");

​

  // adjust stroke type and dash settings

  chart_3.background().stroke({color: "red", dash: "5 2 5", thickness: 5});

  // disable axes

  chart_3.xAxis(false);

  chart_3.yAxis(false);

  chart_3.data(data);

​

  chart_3.container(stage);

  chart_3.draw();

​

​

  // chat with disabled stroke

  var chart_4 = anychart.column();

​

  chart_4.title("Disabled Stroke");

  chart_4.bounds("55%", "60%", "45%", "40%");

  chart_4.background().stroke(null);

​

  chart_4.xAxis(false);

  chart_4.yAxis(false);

  chart_4.data(data);

​

  chart_4.container(stage);

  chart_4.draw();

});