html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // data set

  var data = anychart.data.set([

    ["P1", 16, 20],

    ["P2", 12, 18],

    ["P3", 9, 14]

  ]);

​

  // map data for series

  var seriesData_1 = data.mapAs({x: [0], value: [1]});

  var seriesData_2 = data.mapAs({x: [0], value: [2]});

​

  // set stage

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

​

  // setting 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 solidStrokeSeries = anychart.column();

​

  // setting title

  solidStrokeSeries.title("Solid Stroke");

​

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

  var solidBackground = solidStrokeSeries.background();

  solidBackground.stroke("5 red");

​

  // setting position and bounds

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

​

  // disabling titles, labels and all ticks for Axes

  solidStrokeSeries.yAxis(false);

  solidStrokeSeries.xAxis(false);

​

  // setting data series

  solidStrokeSeries.column(seriesData_1);

  solidStrokeSeries.column(seriesData_2);

​

  // set container and draw

  solidStrokeSeries.container(stage);

  solidStrokeSeries.draw();

​

​

  // chart with gradient stroke

  var gradientStrokeChart = anychart.column();

  gradientStrokeChart.title("Gradient Stroke");

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

  // adjust stroke type and set color keys

  var gradientBackground = gradientStrokeChart.background();

  gradientBackground.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

  gradientStrokeChart.yAxis(false);

  gradientStrokeChart.xAxis(false);

​

  // set series data

  gradientStrokeChart.column(seriesData_1);

  gradientStrokeChart.column(seriesData_2);

​

  // set container and draw

  gradientStrokeChart.container(stage);

  gradientStrokeChart.draw();

​

​

  // chart with dashed stroke

  var dashedStrokeChart = anychart.column();

  dashedStrokeChart.title("Dashed Stroke");

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

​

  // adjust stroke type and dash settings

  var dashedBackground = dashedStrokeChart.background();

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

  // disable axes

  dashedStrokeChart.xAxis(false);

  dashedStrokeChart.yAxis(false);

  dashedStrokeChart.column(seriesData_1);

  dashedStrokeChart.column(seriesData_2);

​

  dashedStrokeChart.container(stage);

  dashedStrokeChart.draw();

​

​

  // chat with disabled stroke

  var disabledStrokeSeries = anychart.column();

​

  disabledStrokeSeries.title("Disabled Stroke");

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

  var disabledBackground = disabledStrokeSeries.background();

  disabledBackground.stroke(null);

​

  disabledStrokeSeries.xAxis(false);

  disabledStrokeSeries.yAxis(false);

  disabledStrokeSeries.column(seriesData_1);

  disabledStrokeSeries.column(seriesData_2);

​

  disabledStrokeSeries.container(stage);

  disabledStrokeSeries.draw();

});