html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create 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 a mekko (marimekko) chart

  var chart = anychart.mekko();

​

  // set the chart data

  chart.data(data);

​

  // enable the chart legend

  chart.legend(true);  

​

  // apply a palette for coloring

  chart.palette(anychart.palettes.wines);

  // customize the tooltip format

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

  // set the tooltip display mode

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

​

  // customize the tooltip title 

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

  title.fontFamily("Calibri");

  title.fontDecoration("underline");

  title.fontWeight(700);

  title.fontSize(18);

  // set the chart labels settings

  chart.labels().format('${%Value}M');

  // set the x-axis title

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

  // set the y-axis title

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

  // set the chart container id

  chart.container('container');

​

  // draw the resulting marimekko chart

  chart.draw();

​

});