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 chart title  

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .text("<span style = 'font-size:16px; font-weight:600;'>Social Media Use in U.S. by Age</span><br><span style = 'font-size:14px;'>Share of U.S. adults saying they use at least one social media platform</span>");

  // format the mosaic chart tooltip using html

  let tooltip = chart.tooltip();

  tooltip

    .useHtml(true)

    .titleFormat("<b><span style='font-size:15px;'>{%SeriesName}</b>")

    .format("<span style='font-size:13px;'><b>{%value}%</b> of people aged <b>{%x}</b> said they<br> used at least one social media platform</span>");

  // set the mosaic chart container id

  chart.container('container');

  // draw the resulting mosaic chart

  chart.draw();

});