TreemapChart
Introduction
TreemapChart
widget in Supervisely is a widget used for displaying a treemap chart. It allows users to visualize data for comparison distribution of different objects. The TreemapChart widget allows easily visualize data to determine the distribution of objects in comparison to each other.
Function signature
TreemapChart(
title="Treemap Chart",
colors=None,
tooltip=None,
)

Parameters
title
str
TreemapChart
title
colors
List[str]
Determines colors for cells in series in TreemapChart
tooltip
str
Determines tooltip for cells in series in TreemapChart
title
Determines TreemapChart
title.
type: str
colors
Determines colors for cells in series in TreemapChart
. The colors should be in hex
format (e.g. #ff0000
).
type: List[str]
default value: None
colors = ["#ff0000", "#00ff00", "#0000ff"]
chart = TreemapChart(
title="Treemap Chart",
colors=colors,
)
tooltip
Determines the tooltip for cells in series in TreemapChart
. The tooltip should be in str
format and may contain {x}
and {y}
placeholders. The name of the cell will be shown instead of {x}
and the value of the cell will be shown instead of {y}
. If not specified, the default tooltip will be used (e.g. name: value
)
type: str
default value: None
tooltip = "This is the name: {x}, this is the value: {y}"
chart = TreemapChart(
title="Treemap Chart",
tooltip=tooltip,
)
Methods and attributes
add_series(names: List[str], values: List[Union[int, float]])
Adds a new series to the TreemapChart
widget.
set_series(names: List[str], values: List[Union[int, float]])
Sets a series to the TreemapChart
widget, removing all previous series.
get_series(index: int))
Returns a series from the TreemapChart
widget by index.
delete_series(index: int)
Deletes a series from the TreemapChart
widget by index.
get_clicked_datapoint()
Returns the clicked datapoint from the TreemapChart
widget as namedtuple.
Mini app example
You can find this example in our GitHub repository:
supervisely-ecosystem/ui-widgets-demos/charts-and-plots/008_treemap_chart/src/main.py
Import libraries
import os
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, TreemapChart, Container, Text
Init API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()
Initialize TreemapChart widget
# Colors are optional. If not specified, the default colors will be used.
colors = [
"#008FFB",
"#00E396",
"#FEB019",]
# Tooltip is optional. If not specified, the default tooltip will be used.
tooltip = "This is the name: {x}, this is the value: {y}"
tc = TreemapChart(title="Treemap Chart", colors=colors, tooltip=tooltip)
Prepare names and values for series
names = ["cats", "dogs", "birds", "fish", "snakes"]
values = [10, 4, 35, 12, 5]
Set series to TreemapChart widget
tc.set_series(names, values)
Using @click event
clicked_datapoint = Text(status="info")
@tc.click
def clicked(datapoint):
# Datapoint is a namedtuple with fields: series_index, data_index, data
# data is a dict with fields: name, value
clicked_datapoint.text = datapoint
Create app layout
Prepare a layout for the app using Card
widget with the content
parameter and place widget that we've just created in the Container
widget.
# Creating Card widget, which will contain the Transfer widget and the Text widget.
card = Card(title="TreemapChart", content=Container(widgets=[dc, clicked_datapoint]))
# Creating the application layout.
layout = Container(widgets=[card])
Create an app using the layout
Create an app object with the layout parameter.
# Initializing the application.
app = sly.Application(layout=layout)

Last updated
Was this helpful?