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

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

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)

Last updated