Treemap Chart

Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.

The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, height:"50%" would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

For more information, see: highcharts/chart.height.

Summary

React Rendered

Default

Points are automatically arranged by their value size.

By default, point colors are assigned sequentially from the global data colors. Note that data points without a value (such as parent nodes) will still take on the next available color.

import React from 'react'

import TreemapChart from 'playbook-ui'

const chartData = [
  {
    name: "Pepperoni",
    parent: "Toppings",
    value: 600,
  }, {
    name: "Cheese",
    parent: "Toppings",
    value: 510,
  }, {
    name: "Mushroom",
    parent: "Toppings",
    value: 330,
  },{
    name: "Onions",
    parent: "Toppings",
    value: 250,
  }, {
    name: "Olives",
    parent: "Toppings",
    value: 204,
  }, {
    name: "Pineapple",
    parent: "Toppings",
    value: 90,
  }, {
    name: "Pizza Toppings",
    id: "Toppings",
  },
]

const TreemapChartDefault = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        id="treemap-default"
        title="Favored Pizza Toppings"
    />
  </div>
)

export default TreemapChartDefault

Grouped Data

Data can be grouped into distinct segments by specifying the relationship in the chartData. For a point to be a parent, it needs an id of type string included in its object. Any other data points may then reference that id as their parent value to establish the tree structure.

Parents can also be passed a custom color to be applied to all of its child points.

import React from 'react'

import TreemapChart from 'playbook-ui'

const chartData = [
  {
    name: 'Meat',
    id: 'Meat',
    color: "#0056CF",
  }, {
    name: 'Pepperoni',
    parent: 'Meat',
    value: 250,
  }, {
    name: 'Meatball',
    parent: 'Meat',
    value: 400,
  }, {
    name: "Anchovy",
    parent: 'Meat',
    value: 40,
  }, {
    name: 'Vegetarian',
    id: 'Vegetarian',
    color: "#F9BB00",
  }, {
    name: 'Onions',
    parent: 'Vegetarian',
    value: 300,
  }, {
    name: 'Pineapple',
    parent: 'Vegetarian',
    value: 90,
  }, {
    name: "Peppers",
    parent: 'Vegetarian',
    value: 80,
  }, {
    name: "Specialty",
    id: "Specialty",
    color: "#9E64E9",
  },{
    name: "Buffalo Chicken",
    parent: "Specialty",
    value: 400,
  }, {
    name: "Supreme",
    parent: "Specialty",
    value: 150,
  }
]

const TreemapChartGroupedData = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        grouped
        id="treemap-grouped-data"
        title="Grouped Toppings"
    />
  </div>
)

export default TreemapChartGroupedData

Drillable

Adding the drillable prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the chartData, detailed in the Grouped Data section above.

import React from 'react'

import TreemapChart from 'playbook-ui'

const chartData = [
  {
    name: "Evergreen",
    id: "Evergreen",
    color: "#0056CF",
  }, {
    name: "Pine",
    id: "Pine",
    parent: "Evergreen",
    value: 300,
    color: "#477BC4",
  }, {
    name: "Ponderosa Pine",
    parent: "Pine",
    value: 50,
  }, {
    name: "Scots Pine",
    parent: "Pine",
    value: 150,
  }, {
    name: "White Pine",
    parent: "Pine",
    value: 100,
  }, {
    name: "Douglas Fir",
    parent: "Evergreen",
    value: 150,
  }, {
    name: "Juniper",
    parent: "Evergreen",
    value: 80,
  }, {
    name: "Hemlock",
    parent: "Evergreen",
    value: 30,
  }, {
    name: "Deciduous",
    id: "Deciduous",
    color: "#F9BB00",
  }, {
    name: "Oak",
    parent: "Deciduous",
    value: 80,
  }, {
    name: "Maple",
    id: "Maple",
    parent: "Deciduous",
    value: 180,
    color: "#F7CE52",
  }, {
    name: "Red Maple",
    parent: "Maple",
    value: 80,
  }, {
    name: "Sugar Maple",
    parent: "Maple",
    value: 100,
  }, {
    name: "Beech",
    parent: "Deciduous",
    value: 50,
  }, {
    name: "Willow",
    parent: "Deciduous",
    value: 100,
  }, {
    name: "Juniper",
    parent: "Deciduous",
    value: 90,
  },
]

const TreemapChartDrillable = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        drillable
        grouped
        id="treemap-drillable"
        title="Drillable Grouped Tree Species"
    />
  </div>
)

export default TreemapChartDrillable

Color Overrides

import React from 'react'

import TreemapChart from 'playbook-ui'

const chartData = [
  {
    name: "Pepperoni",
    parent: "Toppings",
    value: 600,
  }, {
    name: "Cheese",
    parent: "Toppings",
    value: 510,
  }, {
    name: "Mushroom",
    parent: "Toppings",
    value: 330,
  },{
    name: "Onions",
    parent: "Toppings",
    value: 250,
  }, {
    name: "Olives",
    parent: "Toppings",
    value: 204,
  }, {
    name: "Pineapple",
    parent: "Toppings",
    value: 90,
  }, {
    name: "Pizza Toppings",
    id: "Toppings",
  },
]

const TreemapChartColors = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        colors={["data-4", "data-7", "#8E6E53", "#124732"]}
        id="treemap-colors"
        title="Favored Pizza Toppings"
    />
  </div>
)

export default TreemapChartColors

Tooltip Customization

A custom tooltip format can be specified. The desired format can be passed as a string of custom HTML to the tooltipHtml prop.

{point.name} and {point.value} are useful values that can be referenced for each point in the graph.

import React from 'react'

import TreemapChart from 'playbook-ui'

const chartData = [
  {
    name: "Pepperoni",
    parent: "Toppings",
    value: 600,
  }, {
    name: "Cheese",
    parent: "Toppings",
    value: 510,
  }, {
    name: "Mushroom",
    parent: "Toppings",
    value: 330,
  },{
    name: "Onions",
    parent: "Toppings",
    value: 250,
  }, {
    name: "Olives",
    parent: "Toppings",
    value: 204,
  }, {
    name: "Pineapple",
    parent: "Toppings",
    value: 90,
  }, {
    name: "Pizza Toppings",
    id: "Toppings",
  },
]

const TreemapChartTooltip = (props) => (
  <div>
    <TreemapChart
        chartData={chartData}
        id="treemap-tooltip"
        title="Favored Pizza Toppings"
        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
    />
  </div>
)

export default TreemapChartTooltip

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat