This kit provides a wrapping class to place around the MapLibre library. Complete docs for using the library can be found here.
Basic setup to start using MapLibre:
yarn add maplibre-gl@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");
OR include it as a link in the tag <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />Notes :
zoomBtns and flyTo to true and pass in zoomInClick, zoomOutClick and flyToClick as shown in this doc example. mapTheme.marker to set the Marker color. scrollZoom has been disabled in these doc examples for page usabilityVarious plugins are available for use with MapLibre, one of which is the mapbox-gl-draw. This plugin is recommended by MapLibre if you need to add the functionality of drawing polygons on the map.
To test this tool:
Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.
Table can leverage the max-width property. Learn more in our visual guidelines.
Use table size "md" to add padding around each row to increase reading comfortability.
Use table size "lg" to add padding around each row to maximize reading comfortability.
React: Use sticky on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.
Rails: Pass sticky: true to props.
If the table header is not sticking in the right place you will need to pass a inline top style to the thead.
React Example: <thead style={{ top: "-16px" }}>
Rails Example: <thead style="top: -16px">
Sticky may not work if any parent/ancestor of the sticky element has any of the overflow properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to position: static as well.
The stickyLeftColumn prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the <th> and <td>.
If you are using the sub-component variant, then you will pass the id to <Table.Header> and <Table.Cell>
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using stickyLeftColumn prop.
The stickyRightColumn prop works in the same way as the above stickyLeftColumn prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the <th> and <td>.
If you are using the sub-component variant, then you will pass the id to <Table.Header> and <Table.Cell>
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the stickyRightColumn prop.
The stickyLeftColumn and stickyRightColumn props can be used together on the same table as needed.
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
Pass our textAlign global prop to any table.row subcomponent to change the text alignment of all cells within that row.
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.
Pass our textAlign global prop to any table.cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
Pass our verticalAlign global prop to any table.row subcomponent to change the vertical alignment of all cells within that row.
Pass our verticalAlign global prop to any table.cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.
Note: Only use category colors for categories. Do not mix it with product or status colors.
Tighter spacing in first- and last-child cells of each row for data-heavy tables.
If there is one button on each row of the table, ideally, it should use the secondary variant and be placed at the end of the row
If there are two actions on each of the row, one should ideally one should use the secondary variant and the other use the link variant. The button using the secondary variant should be placed at the end.
If there are more than two actions on each row, then they should be contained in secondary circle icon button with the ellipsis-h icon (horizontal ellipsis) at the end of the row
If the button is towards the middle of the table, it should likely use button variant link
Optionally pass the striped (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.
You can optionally build your table using our sub-components, which map to their respective html table elements:
Table.Head = thead
Table.Body = tbody
Table.Row = tr
Table.Header = th
Table.Cell = td
Optionally build your table with divs by passing div to the tag prop of all* your sub-components.
*NOTE: The tag prop defaults to table, which returns html elements. If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use div as their tag in order for the table to render properly.
Pass any of our spacing tokens to the outerPadding / outer_padding prop to customize a table's outer padding (both the left padding of the first column and the right padding of the last column).
The collapsible prop can be used on any Table Row to add a collapsible area. Use the additional collapsibleContent prop to add any content to the collapsible Row.
When using the collapsible prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the toggleCellId prop to pass in the id of the Cell you want to use as the trigger.
NOTE: toggleCellId and the id on the Cell you want to use as the trigger MUST be the same.
The collapsibleContent can display any content, including nested Table Rows.
Additionally, the collapsibleSideHighlight can also be removed by setting it to false if needed. This prop is set to true by default.
NOTE: We advise against using the disableHover Table prop when nesting Table Rows within a Table.
The collapsibleContent can also be used to display nested Tables within each Row.
NOTE: We advise against using the disableHover Table prop when nesting Tables within a Table.
Clickable table rows do not require any additional props. This doc example showcases how to set them up using html_options/htmlOptions and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.
Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.
Customize your header by removing the header borders with the headerStyle="borderless" prop.
Further customize your header by using the table with background kit logic to give your table header a custom background color. Use the headerStyle="floating" prop to visually nest the borderless table within a card or collapsible with a matching background color (the backgroundColor passed to Background kit should match the background or backgroundColor for the element in which it is nested).
NOTE: The Advanced Table kit uses the Tanstack Table v8 under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, the kit has two required props:
tableData accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row. Each parent row is prepended with expansion controls for toggling its nested child rows. The toggleExpansionAll button in the first column header can also be used to toggle expansion of all parent rows within the table.
For a visual of the data structure needed for tableData, see here.
columnDefinitions maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. ColumnDefinitions in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
accessor: this is the key from your data for the value you want rendered in that columnlabel: this is what will be rendered as the column header labelThere is also one optional item that is only required if the table has nested data:
cellAccessors: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.The optional loading prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional initialLoadingRowsCount prop can be used to pass in a number. NOTE: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
the enableSorting prop is a boolean prop set to false by default. If true, the table will add sort logic linked to the sort button in the header. Clicking the sort button will toggle sort between ascending and descending. Currently this sort functionality is only available on the first column.
An optional prop, sortIcon allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. sortIcon also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is ["arrow-up-short-wide", "arrow-down-short-wide"]. All strings must be valid FA icons.
sortControl is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is desc: true.
NOTE: If using expandedControl the dev is expected to manage the row level expansion state themselves, the kit itself will NOT do it by default.
expandedControl is an optional prop that can be used to gain greater control over the expansion state of the Advanced Table. Tanstack handles expansion itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the expansion state so it persists on page reload, set an initial expansion state, etc.
In this example we are showing that if initial expansion state is set, it will render the table expanded according to that state.
The expanded state must be an object with key/value pairs where the key is the row id and the value is a boolean, true or false. Tanstack by default assigns row ids based on index and depth of the row as can be seen in this example. For more information on row ids, see here.
By default, the click event on the row level toggleExpansion icon simply toggles the immediate sub rows open or closed. If you want to attach further logic to that button, the optional onRowToggleClick prop can be used. This click event provides one argument that can be hooked into: the current row object. Any additional functionality provided through this onClick will be applied in addition to the default.
Similar to the row level click event, the default of the click event on the toggleExpansion buttons that render in the first column header (and the subRow Header rows if prop enabled) toggles all top level rows open and closed. If you want to attach further logic to that button, the optional onToggleExpansionClick prop can be used. This click event provides one argument that can be hooked into: the current row object. Any additional functionality provided through this onClick will be applied in addition to the default.
ToggleExpansionIcon is another optional prop that can be used to customize the icon for the toggleExpansion button. This prop takes a string value with the default set to arrows-from-line. All strings must be valid FA icons.
The expandByDepth prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
expandByDepth accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
Expanding a depth: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
Collapsing a depth: Only collapses rows at the selected depth, keeping parent rows expanded for context.
If you want to attach further logic to each option click, the optional onExpandByDepthClick prop can be used. This click event provides 2 arguments that can be hooked into: the depth level of the clicked item AND all flattened table rows. Any additional functionality provided through this onClick will be applied in addition to the default.
subRowHeaders is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
enableToggleExpansion is an additional optional prop that can be used in conjunction with the subRowHeaders prop. enableToggleExpansion is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.
collapsibleTrail is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.
The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional tableOptions can be used to pass tanstack options to the kit.
In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and how to use them, see here
This kit uses the Table kit under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional tableProps prop. This prop must be an object that contains valid Table props. For a full list of Table props, see here.
This doc example showcases the use of two table props, including how to render the vertical borders between columns.
The TableProps prop can also be used to render a sticky header for the Advanced Table.
This doc example showcases how to set a sticky header for a nonresponsive table (see the responsive prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.
Create a sticky header that works for responsive Advanced Tables by setting sticky: true via tableProps and giving the AdvancedTable a maxHeight using our Max Height global prop.
NOTE: This behavior requires a maxHeight to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
Expand the table above to see this in action.
A sticky header on a nonresponsive table is demonstrated in the "Sticky Header" doc example above.
To render sticky columns for the Advanced Table, you can use the stickyLeftColumn prop. This prop expects an array of the column ids you want to be sticky.
To achieve this:
stickyLeftColumn in the order in which the columns are rendered.responsive to none when using stickyLeftColumn since responsive just makes the first column sticky and the slightly different styling for responsive and stickyLeftColumn may override each other in unexpected ways.To achieve a sticky header AND sticky columns together, in addition to the stickyLeftColumn logic outlined above, you can:
sticky: true via tablePropsmaxHeight using our Max Height global prop. NOTE: This behavior requires a maxHeight to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
Expand the table above to see this in action.
As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the inlineRowLoading prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty children array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty children arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
This prop is set to false by default.
The responsive prop can be set to "scroll" or "none", and is set to "scroll" by default to make Advanced Tables responsive. To disable, set responsive="none".
The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional customRenderer item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire row object. The row object provides all data for the current row. To access the data, use row.original which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived.
See here for more indepth information on columnDefinitions are how to use them.
See here for the structure of the tableData used.
pagination is an optional prop that can be used to add pagination to the AdvancedTable. If present, it will add pagination with default values for pageSize, etc. To customize pagination, you can also use paginationProps shown in the next example.
paginationProps is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
pageIndex: An optional prop to set which page is set to open on initial load. Default is '0'pageSize: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'range: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See here for more details. Default is set to '5'Use a nested columns array in your columnDefinitions to create multiple header rows. Any column with columns is treated as a grouped header, and its child columns are displayed beneath it.
Multiple levels of column headers can also be rendered as seen here.
The borders of column groups can be set to a different color using the columnGroupBorderColor prop. In order for these borders to be visible, this prop must be used with tableProps and verticalBorder set to true.
The available colors for the border are Playbook's Text Colors, which can be found here.
selectableRows is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows.
When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well.
The onRowSelectionChange prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! NOTE: Each object within the tableDataArray must contain a unique id in order to attach an id to all Rows for this to function.
selectableRows can also be used with tables without nested row data.
Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to actions will be rendered on the right of the actionsBar. The onRowSelectionChange can then be used to attach the needed click events to those actions.
showActionsBar is an optional prop that renders the header at the top showing the row count. This is set to true by default but can be toggled off by setting it to false
Inline Cell Editing can be achieved with a combination of our TextInput kit and the customRenderer method available through columnDefinitions.
Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.
Trigger Fullscreen mode with the allowFullScreenand fullScreenControl props. allowFullScreen is a boolean that enables Fullscreen functionality for an Advanced Table. fullScreenControl is a callback function that receives an object containing the table's internal toggleFullscreen function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.
The columnVisibilityControl prop allows users to toggle the visibility of table columns dynamically.
The default can be enabled simply by passing { default:true } to the prop as shown. This will render the header with the icon enabled dropdown. The dropdown contains all columns present in the Table and any can be toggled on or off via the checkboxes.
NOTE: The first column will not be shown in the dropdown as an option since all the expansion logic/functionality lives there and it should always be visible.
The columnVisibilityControl prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in value and onChange as shown.
The additional onColumnVisibilityChange provides a callback with the current state as the argument if needed.
By using the includeIds key/value pair as shown within the columnVisibilityControl prop, you can control which columns show up as options in the columnVisibility dropdown.
The columnVisibilityControl prop can also be used with multi-header columns as shown.
Use the pinnedRows prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
NOTE: This prop is in Beta. Current Requirements for V1:
sticky: true via tableProps (works with both responsive and non-responsive tables)top property. For expandable rows, both parent and all its child row ids must be included individuallyTo display the "No Filters Selected" text, the filters prop must be null. As a suggestion, check the values of each key in your filters object. If they are all falsy, return null.
To remove the background from a filter, add the prop background with a value of false.
To display results, use templates single or default.
Filter can leverage the max-width property. Learn more in our visual guidelines.
Click the filter button above to toggle the popover.
To change the filter's popover position, use the placement prop with one of the positions:
"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
This kit uses the Popover kit under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional popoverProps prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see here.
You can customize the order of the colors you would like to use by using the colors prop. Only the data and status colors will work for Playbook charts. See the design page for reference.
By default legend kit uses data_1 color.
Pass the color prop and use any desired value from $data_colors, $status_colors, $product_colors and $category_colors list.
The color prop also allows for use of custom colors passed in as HEX codes.
You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
overflow to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens. Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use ONE desired value 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
We are able to wrap our Gauge kits within multiple other Flex and Card components.
You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.
align Type: String | Values: left | center | right (defaults to center)
verticalAlign Type: String | Values: top | middle | bottom (defaults middle)
layout Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x Type: Number (defaults to 0)
y Type: Number (defaults to 0)
layout determines the position of the legend items
layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
x offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
y offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
A spline can be added by including a separate chart data with the type: 'spline' attribute.
A color can also be specified for the spline.
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
The customOptions prop provides comprehensive access to additional Highcharts options that are not explicitly defined as props.
It's important to note that certain options may require specific script imports to function properly.
Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our staticOptions. For example, yAxis will need to be wrapped with square brackets.
You may also need to override any of the defaults in order to get that options to work.
The stacking prop can be used for a stacked bar graph. The prop allows for normal or percent as options.
Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passingyAxis: 1 to the second node of your chartData array.
To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the axisFormat and axisTitle props, respectively.
You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
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
align Type: String | Values: left | center | right (defaults to center)
verticalAlign Type: String | Values: top | middle | bottom (defaults middle)
layout Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x Type: Number (defaults to 0)
y Type: Number (defaults to 0)
layout determines the position of the legend items
layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
x offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
y offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
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.y} are useful values that can be referenced for each point in the graph.
You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.
align Type: String | Values: left | center | right (defaults to center)
verticalAlign Type: String | Values: top | middle | bottom (defaults middle)
layout Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x Type: Number (defaults to 0)
y Type: Number (defaults to 0)
layout determines the position of the legend items
layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
x offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
y offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
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
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.
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.
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.
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
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.
