html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // chart type

  var chart = anychart.area();

​

  // set data

  chart.splineArea([

    {x: "P1", value: 16},

    {x: "P2", value: 12},

    {x: "P3", value: 9},

    {x: "P5", value: 10},

    {x: "P6", value: 12.5},

    {x: "P7", value: 14},

    {x: "P8", value: 17},

    {x: "P9", value: 18},

    {x: "P10", value: 15},

    {x: "P11", value: 11},

    {x: "P12", value: 8},

    {x: "P13", value: 5},

    {x: "P14", value: 6},

    {x: "P15", value: 11},

    {x: "P16", value: 13},

    {x: "P17", value: 18},

    {x: "P18", value: 21},

    {x: "P19", value: 25},

    {x: "P20", value: 28}

  ]);

​

  // adjust title background fill

  var title = chart.title();

  title.text("Gradient Background Fill");

  title.enabled(true);

  title.padding(5);

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

  titleBackground.enabled(true);

  titleBackground.fill("gold");

​

  // adjust chart background fill

  var background = chart.background();

  background.fill({

    // set colors position

    keys: ["#FFF", "#66F", "#FFF"],

    // set angle of colors drawing

    angle: -130

  });

​

  // draw

  chart.container("container");

  chart.draw();

});