html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // set the data to visualize in a mosaic plot

  let data = {

    header: ['#', '2006', '2009', '2012', '2015', '2018', '2021'],

    rows: [

      ['18–29', 41, 70, 81, 90, 88, 84],

      ['30–49', 6, 42, 64, 77, 78, 81],

      ['50–64', 3, 20, 39, 51, 64, 73],

      ['65+', 0, 5, 16, 35, 37, 45]

    ]

  };

​

  // create a mosaic plot

  let chart = anychart.mosaic();

  // set one of the pre-built mosaic plot design themes

  anychart.theme("pastel"); 

  // load the data to the mosaic plot

  chart.data(data);

  // configure the mosaic plot label settings

  chart.labels()

    .useHtml(true)

    .format("<span style='font-size:12px; font-weight:700; color: #786b61;'>{%value}%</span>");

  // set the padding between the points in the mosaic plot

  chart.pointsPadding(3);

  // set the mosaic plot title

  chart.title("Social Media Use in U.S. by Age");

  // set the mosaic plot container element id

  chart.container('container');

  // draw the resulting mosaic plot

  chart.draw();

});