html,

body,

#mekko-container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create a dataset

  var data = {

    title: "2022 U.S. Quarterly Auto Sales by Top 8 Brands",

    header: ["Name", "Q1", "Q2", "Q3", "Q4"],

    rows: [

      ["Ford", 410.0, 453.5, 441.4, 459.1],

      ["Toyota", 433.4, 416.8, 411.9, 456.5],

      ["Chevrolet", 342.6, 383.8, 371.4, 415.0],

      ["Honda", 238.1, 215.1, 200.2, 227.5],

      ["Hyundai", 152.3, 184.1, 184.4, 195.9],

      ["Jeep", 193.2, 186.6, 161.3, 143.3],

      ["Nissan", 189.8, 172.6, 142.8, 177.4],

      ["Kia", 149.0, 172.8, 181.1, 175.4]

    ]

  };

  // create a mekko (marimekko) chart

  var chart = anychart.mekko();

  // add the dataset to the chart

  chart.data(data);

  // set the x-axis title

  chart.xAxis().title("Sales by brand (units)");

  // set the y-axis title

  chart.yAxis().title("Sales by quarter (%)");

​

  // customize the chart labels

  chart.labels()

    .useHtml(true)

    .format("<b style='color:#ebebeb;font-size:10px;'>{%Value}K</b>");

​

  // rotate the x-axis labels

  chart.xAxis().labels().rotation(-40);

  // set a custom color palette for the chart

  var customPalette = anychart.palettes.distinctColors()

    .items(["#ff7f0e", "#077fe8", "#2ca02c", "#d62728"]);

  chart.palette(customPalette);

  // enable the legend

  chart.legend()

    .enabled(true)

    .fontSize(13)

    .padding([0, 0, 20, 0]);

  // customize the tooltip format

  chart.tooltip()

    .useHtml(true)

    .format("{%seriesName}: <b>{%Value}K</b> units ({%yPercentOfCategory}%)")

    .displayMode("union");

  // set a container

  chart.container("mekko-container");

  // draw the chart

  chart.draw();

});