html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // data

  var dataSet = anychart.data.set([

    ["P1", 16, 20],

    ["P2", 12, 18],

    ["P3", 7, 14],

    ["P4", 8, 16],

    ["P5", 11, 19],

    ["P6", 10, 23],

    ["P7", 6, 17],

    ["P8", 3, 11]

  ]);

​

  // map data for the each series

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

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

​

  // chart type

  var chart = anychart.line();

​

  // set title

  var title = chart.title();

  title.text("Image Fill");

  title.padding(5);

  title.enabled(true);

  var titleBackground = chart.title().background();

  titleBackground.enabled(true);

  titleBackground.fill("gold");

​

  // set chart background

  var background = chart.background();

  background.fill({

    src: "//static.anychart.com/images/underwater.jpg",

    mode: acgraph.vector.ImageFillMode.FIT_MAX

  });

​

  // adjust grid

  var grid = chart.grid();

  grid.enabled(true);

  grid.stroke("#FFF");

  grid.evenFill("#FFF 0.6");

  grid.oddFill("#FFF 0.6");

  grid.layout("horizontal");

  var grid1 = chart.grid(1);

  grid1.enabled(true);

  grid1.stroke("#FFF");

  grid1.layout("vertical");

​

  // adjust axes labels color, ticks color, stroke color

  var xLabels = chart.xAxis().labels();

  xLabels.fontColor("#fff");

  xLabels.fontWeight(900);

  var yLabels = chart.yAxis().labels();

  yLabels.fontColor("white");

  yLabels.fontWeight(900);

  var yAxis = chart.yAxis();

  yAxis.stroke("white");

  var yTicks = chart.yAxis().ticks();

  yTicks.stroke("white");

​

  // using data in series

  chart.line(seriesData_1);

  chart.spline(seriesData_2);

​

  // draw chart

  chart.container("container");

  chart.draw();

});