# given a locator and formatter
import numpy as np

def locator(xmin, xmax, ticks=5):
    # Given view interval, returns the ticks to show in data coordinates
    return (xmin + (xmax - xmin) * np.linspace(0, 1, ticks) ** 0.5).astype(int)

def formatter(x, pos=None):
    # Given x values in data coordinates, return the label to show
    return f'{100 * int(x):.1f}nm'

import numpy as np

def locator(xmin, xmax, ticks=5):
    # Given view interval, returns the ticks to show in data coordinates
    return (xmin + (xmax - xmin) * np.linspace(0, 1, ticks) ** 0.5).astype(int)

def formatter(x, pos=None):
    # Given x values in data coordinates, return the label to show
    return f'{100 * int(x):.1f}nm'

import react_ipywidgets as react
import react_ipywidgets.bqplot as bq
import react_ipywidgets.ipywidgets as w
import bqplot


@react.component
def Plot():
    ticks, set_ticks = react.use_state(4)

    y = data = np.random.random((64, ))
    x = np.arange(len(y))

    x_min = 0
    x_max = len(data) - 1
    # x is in 'data' coordinates
    x_scale = bq.LinearScale(allow_padding=False, min=x_min, max=x_max)

    # use the same locator as matplotlib code
    tick_values = locator(x_min, x_max, ticks)
    ymax = None
    y_scale = bq.LinearScale(min=0, max=ymax)
    display_legend = True
    color = 'red'
    label = 'test'

    lines = bq.Lines(x=x, y=y, scales={"x": x_scale, "y": y_scale}, stroke_width=3, colors=[color], display_legend=display_legend, labels=[label])

    # same formatted as matplotlib code
    tick_labels = {k:formatter(k) for k in tick_values}
    # using .element because the wrapper does not know tick_labels yet
    x_axis = bqplot.Axis.element(scale=x_scale, tick_labels=tick_labels, tick_values=tick_values)
    y_axis = bq.Axis(scale=y_scale, orientation="vertical")
    with w.VBox() as main:
        w.IntSlider(value=ticks, on_value=set_ticks, description="Ticks")
        bq.Figure(axes=[x_axis, y_axis],
                  marks=[lines],
                  scale_x=x_scale,
                  scale_y=y_scale,
                  layout={"min_width": "800px"})
    return main
        
Plot()