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.
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
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
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
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors
and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
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
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