html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

#container text {

  font-size: 13px;

}

anychart.onDocumentReady(function () {

  var data = {

    header: [

      '#',

      'LENOVO',

      'HP',

      'DELL',

      'APPLE',

      'ACER',

      'ASUS',

      'OTHERS'

    ],

    rows: [

      ['Q1', 12613,11114,10158,3555,2900,2603,8693],

      ['Q2', 16197,16165,10648,4368,4007,3593,9829],

      ['Q3', 18310,15447,10827,5513,5085,4747,11448],

      ['Q4', 21491,15683,13199,6893,4741,4570,12813]

    ]

  };

  // set the chart theme

  anychart.theme('darkBlue');

​

  // create a mosaic chart

  var chart = anychart.mosaic();

  // set points padding

  chart.pointsPadding(3);

  // set chart data

  chart.data(data);

  // set the chart labels settings

  chart.labels()

    .format(function(e){

      var value = ((this.value)/1000).toFixed(2);

      return value + " M";

    });

  // set union tooltip

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

  // enable HTML in tooltips and format

  chart

    .tooltip()

    .useHtml(true)

    .format("<h5 style='font-size:14px; margin: 0.5rem 0;'>{%name}</h5>{%SeriesName}: {%value}{scale:(1000)(1000)|( M)}");

  // set container id for the chart

  chart.container('container');

  // set the chart title  

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .text("<span style='font-size:16px';>Quarterly Brand-wise Personal Computer Shipments in 2020</span>");

  // initiate chart drawing

  chart.draw();

});