html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // chart type

  var chart = anychart.line();

​

  // set chart title and adjust it

  var title = chart.title();

  title.enabled(true);

  title.text("Profitability Growth\n(in % to the previous year)");

  title.hAlign("center");

  title.fontColor("white");

​

  // set background color

  var background = chart.background();

  background.fill({

    // set colors position

    keys: ["#406181", "#6DA5DB"],

    // set angle of colors drawing

    angle: 90

  });

​

  // data

  var data =[

    ["Jan", 34],

    ["Feb", 44],

    ["Mar", 48],

    ["Apr", 54],

    ["May", 60],

    ["Jun", 70],

    ["Jul", 58],

    ["Aug", 62],

    ["Sep", 54],

    ["Oct", 45],

    ["Nov", 39],

    ["Dec", 23]

  ];

​

  // set data into series

  var series = chart.line(data);

​

  // set chart stroke color, thickness dash

  series.stroke({color: "#BBDA00", dash: "4 3", thickness: 3});

  series.hovered().stroke({color: "#BBDA00", dash: "4 3", thickness: 3});

  series.name("dashed stroke");

​

  // adjust markers of a series

  var markers = series.markers();

  markers.enabled(true);

  markers.fill("#BBDA00");

  markers.stroke("2 white");

  var hoverMarkers = series.hovered().markers();

  hoverMarkers.fill("darkred");

  hoverMarkers.stroke("2 white");

​

  // adjust tooltip

  var tooltip = series.tooltip();

  tooltip.format("{%x}, {%value}%");

  tooltip.fontColor("white");

​

  var tooltipBackground = series.tooltip().background();

  tooltipBackground.fill("#406181");

  tooltipBackground.stroke("white");

  tooltipBackground.cornerType("round");

  tooltipBackground.corners(4);

​

  // adjust y axis

  var yAxis = chart.yAxis();

  yAxis.ticks(null);

  yAxis.minorTicks(null);

  yAxis.stroke("white");

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

  yLabels.fontColor("white");

  yLabels.fontWeight(900);

  yLabels.format("{%value}%");

​

  // set additional y axis hide dashed right stroke of a grid

  var yAxis1 = chart.yAxis(1);

  yAxis1.ticks(null);

  yAxis1.stroke("white");

  yAxis1.labels(null);

  yAxis1.orientation("right");

​

  // adjust x axis

  var xAxis = chart.xAxis();

  xAxis.stroke("white");

  var xLabels = xAxis.labels();

  xLabels.fontColor("white");

  xLabels.fontWeight(900);

  xLabels.height(30);

  xLabels.vAlign("middle");

​

  // adjust grid

  chart.xGrid().enabled(true);

  chart.xGrid().stroke({color: "white", dash: "3 5"});

  chart.xGrid().palette([null, "black 0.1"]);

  chart.yGrid().enabled(true);

  chart.yGrid().stroke("white");

​

  // adjust y scale

  chart.yScale().maximum(100);

  chart.yScale().ticks().interval(20);

​

  // draw

  chart.container("container");

  chart.draw();

});