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 = anychart.data.set([

    ["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.hoverStroke({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.hoverMarkers();

  hoverMarkers.fill("darkred");

  hoverMarkers.stroke("2 white");

​

  // adjust tooltip

  var tooltip = series.tooltip();

  tooltip.format(function(){

    return this.x + ", " + this.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(function() {

    return this.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 = chart.xAxis().labels();

  xLabels.fontColor("white");

  xLabels.fontWeight(900);

  xLabels.height(30);

  xLabels.vAlign("middle");

​

​

  // adjust grid

  var grid = chart.grid();

  grid.enabled(true);

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

  grid.evenFill(null);

  grid.oddFill("black 0.1");

  grid.layout("vertical");

  var grid1 = chart.grid(1);

  grid1.enabled(true);

  grid1.stroke("white");

  grid1.layout("horizontal");

​

  // adjust y scale

  var yScale = chart.yScale();

  yScale.maximum(100);

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

  yTicks.interval(20);

​

  // draw

  chart.container("container");

  chart.draw();

});