Treemap Charts

Treemap Chart is a powerful data visualization tool that displays hierarchical data as a set of nested rectangles. Each rectangle represents a category or subcategory, and its size is proportional to a specific value, making it easy to compare the relative sizes of different elements within the hierarchy.

SpreadJS allows you to add and customize the appearance of treemap charts by modifying various properties, including color palette, graph opacity, border style, chart background, chart border, plot area padding, tooltip style, and more. These modifications can be made either through code or by using the Inspector tab in the SpreadJS Designer.

type=note
Note:
Hover animation is not supported.

An image of a treemap chart is shown below:

treemap2

Refer to the following sample code to add a treemap chart.

type=note
Note:
This sample is based on the "salesTable" data from the Create Data Charts page. Therefore, make sure you have followed the primary steps mentioned on that page for adding a Data Chart. You can also customize the data source to meet your specific needs.

// Treemap Chart
const sheet = spread.getActiveSheet();
sheet.name("Treemap Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);

dataChart.setChartConfig({
    tableName: 'Sales',
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.treemap,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                details: [{ field: 'Region' }, { field: 'Product' }],
            },
            config: {
                text: [{
                    template: '{detailFields.value}',
                    textStyle: {
                        color: 'black',
                        fontFamily: 'Calibri',
                        fontSize: 16,
                        fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                        fontWeight: 'Bold',
                    },
                }],
            }
        }
    ],
    config: {
        header: {
            title: "Treemap Chart",
            padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
            },
            style: {
                fill: { type: 'CssColor', color: 'rgba(255,255,255,0.9)' },
                shadow: { blur: 4, color: 'rgba(0,0,0,0.05)' }
            },
            textStyle: {
                color: 'rgba(30,30,30,1)',
                fontSize: 18,
                fontFamily: 'Calibri',
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: 'Bold',
                alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
            },
        },
    },
});