Mosaic Chart

• Overview
• Quick Start
• General Settings
• Special Settings
  • Points Padding
  • Appearance
  • Vertical Mosaic Chart

Overview

Mosaic chart is similar to the basic Mekko chart, with the following differences:

• Y scale is ordinal and axes labels contain series names instead of numbers,
• Points padding is increased.

Quick Start

To create a Mosaic chart, use the anychart.mosaic() chart constructor. If you pass the data to this chart constructor, it creates mekko series.

To create mekko series explicitly, call the mekko() method.

The following sample demonstrates how a basic Mosaic chart is created:

// create a data set
var data = anychart.data.set([
  ["QTR1", 10000, 12500],
  ["QTR2", 12000, 15000],
  ["QTR3", 13000, 16500],
  ["QTR4", 10000, 13000],
]);

// map the data
var seriesData_1 = data.mapAs({x: 0, value: 1});
var seriesData_2 = data.mapAs({x: 0, value: 2});

// create a chart
chart = anychart.mosaic();

// add series and change the orientation
var series1 = chart.mekko(seriesData_1).name("Item 1");
var series2 = chart.mekko(seriesData_2).name("Item 2");

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Mosaic chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings

Points Padding

Points padding is a special setting in Mekko charts, it is controlled with pointsPadding() method and sets the distance between elements (tiles), it serves only aesthetic purpose and it is set to different default values in Mekko and BarMekko constructors.

Appearance

Mosaic chart appearance is tuned similar to basic Mekko chart or Column chart.

Here is a sample of a mosaic chart with visual settings configured:

Vertical Mosaic Chart

Most types of series in AnyChart can be drawn both in horizontal and vertical orientation: Vertical Charts (Overview).

Here is the information about creating Vertical Mosaic Chart:

• Vertical Mosaic