html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create bar chart

  var chart = anychart.bar();

  chart.padding([10, 20, 0, 10]);

​

  // set chart title text settings

  chart.title('Top 10 Cosmetic Products by Sales per Day');

​

  // data for the chart

  var data = anychart.data

    .set([

      ['Eyeshadows', 31, 4, 3],

      ['Eyeliner', 39, 6, 6],

      ['Eyebrow pencil', 47, 8, 12],

      ['Nail polish', 60, 7, 8],

      ['Lipstick', 88, 5, 6],

      ['Lip gloss', 123, 8.3, 6],

      ['Mascara', 150, 5.4, 11],

      ['Foundation', 173, 16, 15],

      ['Rouge', 201, 10, 4],

      ['Powder', 229, 3, 7]

    ])

    .mapAs({

      x: 0,

      value: 1,

      valueLowerError: 2,

      valueUpperError: 3

    });

​

  // create bar series with data

  var series = chart.bar(data);

​

  // set tooltip formatter

  series

    .tooltip()

    .fontColor('#E1E1E1')

    .titleFormat('{%X}')

    .format('{%Value} pieces per day');

​

  // set titles for axises

  chart.xAxis().title('Products by Sales per Day');

  chart.yAxis().title('Average Sales per Day');

​

  // set scale minimum

  chart.yScale().minimum(0);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});