JavaScript Mosaic Chart

Also known as Marimekko Chart

This example shows creation of a Mosaic Chart made on user side by utilizing RectangleSeries. Mosaic Chart can be used to compare observation counts of groups (sub-categories) across different categories.

Here's the creation of a Mosaic Chart using a pre-defined interface.

// Create Chart.
const chart = mosaicChart()
// Add sub-categories (Each X-category can have a single value for each sub-category).
const A = chart.addSubCategory('A')
const B = chart.addSubCategory('B')
// Add categories (These are drawn progressively on X axis).
const category1 = chart.addCategory('Category #1')
const category2 = chart.addCategory('Category #2')
// Set values of categories (relative X size).
// Set values of sub-categories on categories (relative Y size).
category1.setSubCategoryValue(A, 40).setSubCategoryValue(B, 60)
category2.setSubCategoryValue(A, 80).setSubCategoryValue(B, 20)

The actual Mosaic Chart logic just serves to provide a starting point for users to create their own API based on their needs and preferences.