Skip to content

chart

Displays data sets in a chart or a group of charts.

The chart control is based on the plotly.js graphs library.

A chart control can hold several traces, that can display individual data sets.

To indicate properties for a given trace, you will use the indexed properties (using the property_name[index] syntax, with the indices starting at index 1) to specify which trace you target.

Indexed properties can have a default value (using the property_name syntax with no index) which is overridden by any specified indexed property.

The data property supported types are:

  • pandas Dataframe
  • list of lists
  • numpy series
  • list of pandas dataframes

Properties

Name Type Default Description
data(★) any Mandatory

The data object bound to this chart control.
type indexed(str) scatter

Chart type. See the Plotly chart type documentation for details.
mode indexed(str) lines+markers

Chart mode. See the Plotly chart mode documentation for details.
x indexed(str)

Column name for the x axis. Synonym for lon.
y indexed(str)

Column name for the y axis. Synonym for lat.
z indexed(str)

Column name for the z axis.
lon indexed(str)

Column name for the longitude value. Synonym for x.
lat indexed(str)

Column name for the latitude value. Synonym for y.
text indexed(str)

Column name for the text associated to the point for the indicated trace. This is meaningful only when _mode_ has the text option.
base indexed(str)

Column name for the base value. Used in bar charts only. See the Plotly bar chart base documentation for details."
title str

The title of this chart control.
render bool True

If True, this chart is visible on the page.
on_range_change Callback

Callback function called when the visible part of the x axis changes. The function receives four parameters:

  • state (State): the state instance.
  • id (optional[str]): the identifier of the chart control.
  • action (optional[str]): the name of the action that provoked the change.
  • payload (dict[str, any]): the full details on this callback's invocation, as emitted by plotly.
columns str|List[str]|dict[str, dict[str, str]] _All columns_

List of column names

  • str: ;-separated list of column names
  • List[str]: list of names
  • dict: {"col_name": {format: "format", index: 1}} if index is specified, it represents the display order of the columns. If not, the list order defines the index
label indexed(str)

The label for the indicated trace. This is used when the mouse hovers over a trace.
name indexed(str)

The name of the indicated trace.
selected dynamic(list[int]|str)

List of the selected point indices.
color indexed(str)

The color of the indicated trace (or a column name for scattered).
selected_color indexed(str)

The color of the selected points for the indicated trace.
marker indexed(dict[str, any])

The type of markers used for the indicated trace. See marker for details. Color and size can be column name.
line indexed(str|dict[str, any])

The configuration of the line used for the indicated trace. See line for details. If the value is a string, it must be a dash type or pattern (see dash style of lines for details).
selected_marker indexed(dict[str, any])

The type of markers used for selected points in the indicated trace. See selected marker for details.
layout dict[str, any]

The plotly.js compatible layout object.
plot_config dict[str, any]

The plotly.js compatible configuration options object.
options indexed(dict[str, any])

The plotly.js compatible data object where dynamic data will be overridden..
orientation indexed(str)

The orientation of the indicated trace.
text_anchor indexed(str)

Position of the text relative to the point. Valid values are: top, bottom, left, and right.
xaxis indexed(str)

The x axis identifier for the indicated trace.
yaxis indexed(str)

The y axis identifier for the indicated trace.
width str|int|float 100%

The width, in CSS units, of this element.
height str|int|float

The height, in CSS units, of this element.
on_change Callback

The name of a function that is triggered when the value is updated.
The parameters of that function are all optional:

  • state (State): the state instance.
  • var_name (str): the variable name.
  • value (any): the new value.
propagate bool App config

Allows the control's main value to be automatically propagated.
The default value is defined at the application configuration level. If True, any change to the control's value is immediately reflected in the bound application variable.
active dynamic(bool) True

Indicates if this component is active. An inactive component allows no user interaction.
id str

The identifier that will be assigned to the rendered HTML component.
properties dict[str, any]

Bound to a dictionary that contains additional properties for this element.
class_name str

List of CSS class names that will be associated with the generated HTML Element. This class names will be added to the default taipy-<element_type>.
hover_text dynamic(str)

Information that is displayed when the user hovers over this element.

(★)data is the default property for this visual element.

Usage

Because the chart control is so flexible, we have split the different use cases into separate sections.