Prevent X Axis Timestamps from Overlapping in Plots

[keenanjohnson]

Question

Hey all!

I noticed in the docs for line plots, that the timestamps overlap when you turn on the live plots and use a timestamp for the X-Axis. See image below from the docs page.

I've reproduced this in my own project and I am wondering how to fix it? Thanks!

[falkoschindler]

Hi @keenanjohnson,

I guess this is more or less a Matplotlib question and you'll find plenty of examples online on how to fine-tune a Matplotlib figure. Here's an example changing the figure size, rotating the labels and increasing the bottom margin:

line_plot = ui.line_plot(n=2, limit=20, figsize=(10, 5), update_every=5) \
    .with_legend(['sin', 'cos'], loc='upper center', ncol=2)

line_plot.fig.gca().tick_params(axis='x', rotation=-30)
line_plot.fig.subplots_adjust(bottom=0.25)
line_plot.update()

[keenanjohnson]

FYI I figured out this issue for anyone in the future. It seems that this happens if the update_every argument is set to 1 and you try to update the plot with an array of only one value. This script for example will throw the warning:

import math
from datetime import datetime
from nicegui import ui

line_plot = ui.line_plot(n=2, limit=20, figsize=(3, 2), update_every=1) \
    .with_legend(['sin', 'cos'], loc='upper center', ncol=2)

def update_line_plot() -> None:
    now = datetime.now()
    x = now.timestamp()
    y1 = math.sin(x)
    y2 = math.cos(x)
    line_plot.push([now], [[y1], [y2]])

line_updates = ui.timer(0.1, update_line_plot, active=False)
line_checkbox = ui.checkbox('active').bind_value(line_updates, 'active')

ui.run()