html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // chart type

  var chart = anychart.area();

​

  // set title

  chart.title("Column Chart");

​

  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.enabled(true);

  title.text("Radial Gradient Background Fill");

  title.background("#FFF");

​

  // adjust chart background fill

  var background = chart.background();

  background.fill(['#fff', '#66f', '#fff'], 0.5, 0.5, -130);

​

  // draw

  chart.container("container");

  chart.draw();

});