h2oai / wave

Realtime Web Apps and Dashboards for Python and R
https://wave.h2o.ai
Apache License 2.0
4.01k stars 328 forks source link

Align y-axis scales for plots with more than one mark type #1292

Open jfarland opened 2 years ago

jfarland commented 2 years ago

When plotting two different mark types on the same plot, the y-axis aren't guaranteed to be the same scale, even by setting the y_min / y_max consistently. One way to do this would be to introduce another parameter to control major tick interval.

Here's some example code:

 q.page['timeseries'] = ui.plot_card(box = ui.box('timeseries', height = '1000px'), 
            title = 'My Title',
            data = ts_plot_data, 
            plot = ui.plot([
                ui.mark(type='path', x_scale='time',  x='=date', y='=picks', color='=label', y_min=0, y_max = np.max(plot_data["upper_bound"]), color_range="#3399FF #FF9966", y_title="Picks", y_nice=True), 
                ui.mark(type='area', x_scale='time', x='=date', y0='=lower_bound', y='=upper_bound', y_min=0, y_max = np.max(plot_data["upper_bound"]), y_nice = True)])
        )

And the result:

image

in ggplot2, this is controlled explicitly with sec_axis. Ideally, if both marks are plotting the same quantity (or at least in the same units as each other), a secondary axis may not necessary. Here's another example using ggplot: https://www.r-graph-gallery.com/line-chart-dual-Y-axis-ggplot2.html

mtanco commented 2 years ago

related to #617