html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // load data

  var data = {

    title: 'Global Smartphone Shipments (In Millions) in 2019',

    header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],

    rows: [

      ['Huawei', 59.1,56.6,66.8,56.2],

      ['Vivo', 23.9,27,31.3,31.5],

      ['Apple', 42,36.5,44.8,72.3],

      ['Samsung', 72,76.3,78.2,70.4],

      ['Xiaomi', 27.8,32.3,31.7,32.9],

      ['Oppo', 25.7,30.6,32.3,31.4],

      ['Others', 90.5,97.7,94.9,106.4],

    ]

  };

​

  // create mekko chart

  var chart = anychart.mekko();

​

  // set chart data

  chart.data(data);

​

  // enabled legend

  chart.legend(true);

  // Anychart uses palette for coloring

  chart.palette(anychart.palettes.wines);

  // set format tooltip

  chart.tooltip().format('{%seriesName}: ${%Value}M');

  // set display mode for the tooltip

  chart.tooltip().displayMode("union");

  // Customize + tooltip title 

  var title = chart.tooltip().title();

  title.fontFamily("Calibri");

  title.fontDecoration("underline");

  title.fontWeight(700);

  title.fontSize(18);

  // set titles for x-axis

  chart.xAxis().title('Smartphone Shipments by Brands');

  // set titles for y-axis

  chart.yAxis().title('Smartphone Shipments by Quarters %');

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

​

});