{"id":27385,"date":"2025-11-10T21:15:57","date_gmt":"2025-11-10T21:15:57","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?post_type=chartchooser&#038;p=27385"},"modified":"2026-02-26T11:55:23","modified_gmt":"2026-02-26T11:55:23","slug":"treemap-categorical-comparison","status":"publish","type":"chartchooser","link":"https:\/\/www.highcharts.com\/blog\/chartchooser\/treemap-categorical-comparison\/","title":{"rendered":"Treemap Chart"},"content":{"rendered":"\n<section class=\"wp-block-highsoft-section neutral-50-light transparent title-and-intro page-section\">\n<div class=\"wp-block-group content-container is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-ed5ff923 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-button\"><a href=\"\/chartchooser\" class=\"hc-button hc-button--neutral hc-button--size-300\" data-link-template=\"\/chartchooser\" aria-label=\"Back to charts\">Back to charts<\/a><\/div>\n\n\n<h2 class=\"wp-block-post-title\">Treemap Chart<\/h2>\n\n\n<p>Treemaps are used to compare categorical data.<\/p>\n\n\n\n<p class=\"has-text-align-center\">The demo displays the Danish exports in 2018. Treemap charts make it easy to see that services represent Denmark&#8217;s biggest export, with a percentage of 39%. The other main exports are chemical products, agriculture, and machinery.<\/p>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent example-1 page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7fc3d43a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\">\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:600px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/chartchooser\/categorical-comparison-treemap\" class=\"hs-iframe__main\" title=\"Denmark Export 2018\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light transparent\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-fc054d2d wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon hc-icon--size-l\" style=\"color:var(--icon-color-blue)\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" aria-label=\"Lightbulb04\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.5 22h5M10 10h4m-2 0v6m3-.674a7 7 0 1 0-6 0V16c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083C10.602 19 11.068 19 12 19s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C15 17.398 15 16.932 15 16z\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" aria-label=\"Lightbulb04\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.5 22h5M10 10h4m-2 0v6m3-.674a7 7 0 1 0-6 0V16c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083C10.602 19 11.068 19 12 19s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C15 17.398 15 16.932 15 16z\"><\/path><\/svg><\/span><\/span><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-400-font-size\">Nice to know<\/h3>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-highsoft-hs-tag\"><div class=\"hc-tag hc-tag--Success no-icon\"><span class=\"hc-tag__text\">Pros:<\/span><\/div><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-list hs-list-block\" data-bullet-type=\"dot\" style=\"--icon-width:24px;--icon-height:24px;--item-spacing:auto\"><ol class=\"hs-list\"><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">A treemap is an appealing and fashionable chart.<\/p><\/li><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">The treemap has a compact shape that makes it a great visualization to fit into a dashboard and small screens.<\/p><\/li><\/ol><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-tag\"><div class=\"hc-tag hc-tag--Danger no-icon\"><span class=\"hc-tag__text\">Cons:<\/span><\/div><\/div>\n\n\n\n<div class=\"wp-block-highsoft-hs-list hs-list-block\" data-bullet-type=\"dot\" style=\"--icon-width:24px;--icon-height:24px;--item-spacing:auto\"><ol class=\"hs-list\"><li class=\"hs-list__item\"><span class=\"hs-list__prefix\">\u2022<\/span><p class=\"hs-list__text \">In some cases, a treemap is not the most effective choice if the data set used for comparison has similar values. In this case, the audience will have difficulty comparing two areas or more with roughly the same surface. To solve this issue, either add labels to the treemap or select a different chart type, such as a bar or column chart, to help the audience.<\/p><\/li><\/ol><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent separator page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent example-2 page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7fc3d43a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\">\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:600px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/09\/15214527\/Treemap-charts.gif\" class=\"hs-iframe__main\" title=\"GIF showing a drilldown chart.\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light transparent\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-fc054d2d wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon hc-icon--size-l\" style=\"color:var(--icon-color-blue)\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" aria-label=\"Lightbulb04\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.5 22h5M10 10h4m-2 0v6m3-.674a7 7 0 1 0-6 0V16c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083C10.602 19 11.068 19 12 19s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C15 17.398 15 16.932 15 16z\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" aria-label=\"Lightbulb04\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.5 22h5M10 10h4m-2 0v6m3-.674a7 7 0 1 0-6 0V16c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083C10.602 19 11.068 19 12 19s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C15 17.398 15 16.932 15 16z\"><\/path><\/svg><\/span><\/span><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-400-font-size\">Remark<\/h3>\n<\/div>\n\n\n\n<p>A <a href=\"https:\/\/www.highcharts.com\/docs\/chart-concepts\/drilldown\" target=\"_blank\" rel=\"noreferrer noopener\">drilldown<\/a> is an excellent feature to add to a treemap for more data exploration and comparison. In this demo by clicking on each main area the audience can see and compare the surface of provinces and territories.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent separator page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent example-3 page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7fc3d43a wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-highsoft-hs-box hs-box transparent\" style=\"padding:var(--wp--preset--spacing--20);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:0;--hs-box-border-style:none;--border-color-light:transparent;--border-color-dark:transparent;--hs-box-border-radius:0;--hs-box-overflow:hidden\">\n<div class=\"wp-block-highsoft-hs-iframe hs-iframe\" style=\"height:600px\"><div class=\"hs-iframe__container\"><iframe src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/chartchooser\/categorical-comparison-treemap-monochrome\" class=\"hs-iframe__main\" title=\"Denmark Export 2018\" loading=\"lazy\" allowfullscreen scrolling=\"no\"><\/iframe><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light transparent\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);--hs-box-width:auto;--hs-box-min-width:100%;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-fc054d2d wp-block-group-is-layout-flex\">\n<div class=\"wp-block-highsoft-hs-icon icon-display\"><span class=\"hc-icon hc-icon--size-l\" style=\"color:var(--icon-color-blue)\"><span class=\"hc-icon-light\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" aria-label=\"Lightbulb04\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.5 22h5M10 10h4m-2 0v6m3-.674a7 7 0 1 0-6 0V16c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083C10.602 19 11.068 19 12 19s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C15 17.398 15 16.932 15 16z\"><\/path><\/svg><\/span><span class=\"hc-icon-dark\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" aria-label=\"Lightbulb04\" role=\"img\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.5 22h5M10 10h4m-2 0v6m3-.674a7 7 0 1 0-6 0V16c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083C10.602 19 11.068 19 12 19s1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C15 17.398 15 16.932 15 16z\"><\/path><\/svg><\/span><\/span><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-font-size-400-font-size\">Accessibility<\/h3>\n<\/div>\n\n\n\n<p>To reach a broader audience, feel free to create an accessible interactive treemap chart by using wider borders between categories.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent separator page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n<\/div>\n<\/section>\n\n\n\n<section class=\"wp-block-highsoft-section neutral-50-light transparent extra-info page-section\">\n<div class=\"wp-block-group content-container has-global-padding is-layout-constrained wp-container-core-group-is-layout-bdcbbb17 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-highsoft-hs-box hs-box neutral-0-light transparent\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);--hs-box-width:auto;--hs-box-min-width:auto;--hs-box-max-width:100%;--hs-box-height:auto;--hs-box-min-height:auto;--hs-box-max-height:auto;--hs-box-border-width:1px;--hs-box-border-style:solid;--border-color-light:var(--primitives-neutral-100);--border-color-dark:var(--primitives-neutral-700);--hs-box-border-radius:8px;--hs-box-overflow:hidden\">\n<div class=\"wp-block-group hs-blank-box-group is-vertical is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-f067733e wp-block-group-is-layout-flex\">\n<h3 class=\"wp-block-heading has-font-size-400-font-size\">Information<\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Learn more about <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/treemap\" target=\"_blank\" rel=\"noreferrer noopener\">how to create a treemap<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Use a treemap chart to show categorical data comparison. Explore Chart Chooser to know more about treemaps and other data visualization charts.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_chartchooser_svg":"treemap"},"objective":[900],"data_type":[901],"chart_type":[913],"license_type":[970],"class_list":["post-27385","chartchooser","type-chartchooser","status-publish","hentry","objective-comparison","data_type-categorical","chart_type-treemap","license_type-highcharts"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/chartchooser\/27385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/chartchooser"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/chartchooser"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=27385"}],"wp:term":[{"taxonomy":"objective","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/objective?post=27385"},{"taxonomy":"data_type","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/data_type?post=27385"},{"taxonomy":"chart_type","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/chart_type?post=27385"},{"taxonomy":"license_type","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/license_type?post=27385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}