LineChart

Introduction

Linechart is a Supervisely widget that allows for visualizing data as a line chart. It supports data in pandas dataframe format or a Python list of dictionaries with a specific structure. This widget could be considered an advanced version of a LinePlot widget with the support of ApexCharts library.

The widget allows for customization of the chart title, axis titles, and color scheme. Linechart also supports zooming, panning, and downloading the chart as png, svg, or csv. Additionally, it can detect clicks on data points and respond to them through Python code

Function signature

size1 = 10
x1 = list(range(size1))
y1 = np.random.randint(low=10, high=148, size=size1).tolist()
s1 = [{"x": x, "y": y} for x, y in zip(x1, y1)]

size2 = 30
x2 = list(range(size2))
y2 = np.random.randint(low=0, high=300, size=size2).tolist()
s2 = [{"x": x, "y": y} for x, y in zip(x2, y2)]

line_chart = LineChart(
    title="Max vs Denis",
    series=[{"name": "Max", "data": s1}, {"name": "Denis", "data": s2}],
    xaxis_type="category",
)

Parameters

Parameters	Type	Description
title	str	Line chart title
series	list	List of series including names and lists of X, Y coordinates
zoom	bool	Enable zoom on Linechart
stroke_curve	Literal["smooth", "straight"]	Set line type (straight or curved)
stroke_width	int	Set line width
markers_size	int	Set point markers size
data_labels	bool	If True it will display Y value of data for each datapoint
xaxis_type	Literal["numeric", "category", "datetime"]	Set type of divisions on X axis
xaxis_title	str	Set title for the X axis
yaxis_title	str	Set title for the Y axis
yaxis_autorescale	bool	Set autoscaling of the Y axis
height	Union[int, str]	Widget height
decimalsInFloat	int	Set number of decimals in float values of Y axis
data_type	Literal["dict", "tuple"]	The representation of xy coordinates. Default as a dictionary.

title

Line chart title

type: str

line_chart = LineChart(
    title="Linechart title",
    series=[{"name": "Max", "data": s1}],
    xaxis_type="numeric",
)

series

List of series including names and lists of X, Y coordinates

type: list

line_chart = LineChart(
    title="Max vs Denis",
    series=[{"name": "Max", "data": s1}, {"name": "Denis", "data": s2}],
    xaxis_type="numeric",
)

zoom

Enable zoom on Linechart

type: bool

default False

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    zoom=True
)

stroke_curve

Set line type (straight or curved)

type: Literal["smooth", "straight"]

default "smooth"

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    stroke_curve="straight"
)

stroke_width

Set line width

type: int

default 2

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    stroke_width=5
)

markers_size

Set point markers size

type: int

default 4

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    markers_size=8
)

data_labels

If True it will display Y value of data for each

type: bool

default False

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    data_labels=True
)

xaxis_type

Set type of divisions on X axis

type: Literal["numeric", "category", "datetime"]

default numeric

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    xaxis_type="numeric",
)

xaxis_title

Set title for the X axis

type: str

default None

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    xaxis_type="category",
    xaxis_title="days",
)

yaxis_title

Set title for the Y axis

type: str

default None

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    xaxis_type="category",
    yaxis_title="sales",
)

yaxis_autorescale

Set autoscaling of the Y axis

type: bool

default True

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    yaxis_autorescale=False
)

height

Widget height

type: Union[int, str]

default 350

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    height=150
)

decimalsInFloat

Set number of decimals in float values of Y axis

type: int

default 2

line_chart = LineChart(
    title="Title",
    series=[{"name": "Max", "data": s1}],
    decimalsInFloat=1
)

Methods and attributes

Attributes and Methods	Description
update_y_range(ymin: int, ymax: int, send_changes=True)	Update chart Y axis range.
get_clicked_value()	Get value of clicked datapoint.
get_clicked_datapoint()	Get clicked datapoint.
set_title(title: str, send_changes: bool = True)	Set chart title.
add_series(name: str, x: list, y: list)	Add new series to chart.
add_series_batch(series: dict)	Add batch of series to chart.
set_series(series: list, description: str)	Set series to chart.
set_colors(colors: list, description: str)	Set colors for series in chart.
@click	Decorator function to handle chart click.

Mini App Example

You can find this example in our Github repository:

ui-widgets-demos/charts and plots/001_line_chart/src/main.py

Import libraries

import os

import numpy as np
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, LineChart, Table

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()

Prepare series for chart

size1 = 10
x1 = list(range(size1))
y1 = np.random.randint(low=10, high=148, size=size1).tolist()
s1 = [{"x": x, "y": y} for x, y in zip(x1, y1)]

size2 = 30
x2 = list(range(size2))
y2 = np.random.randint(low=0, high=300, size=size2).tolist()
s2 = [{"x": x, "y": y} for x, y in zip(x2, y2)]

Initialize LineChart widget

line_chart = LineChart(
    title="Max vs Denis",
    series=[{"name": "Max", "data": s1}, {"name": "Denis", "data": s2}],
    xaxis_type="category",
)

Create app layout

Prepare a layout for app using Card widget with the content parameter.

row_id = 1
columns = ["id", "Line", "x", "y"]
result_table = Table(data=[], columns=columns, width="25%")


container = Container(widgets=[line_chart, result_table])
card = Card(title="Line Chart", content=container)

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=card)

Add functions to control widgets from python code

@line_chart.click
def add_row_to_table(datapoint: LineChart.ClickedDataPoint):
    global row_id
    row = [row_id, datapoint.series_name, datapoint.x, datapoint.y]
    row_id += 1
    result_table.insert_row(row)