diff --git a/.changeset/swift-waves-deny.md b/.changeset/swift-waves-deny.md new file mode 100644 index 0000000000000..5f8a8c8ca451f --- /dev/null +++ b/.changeset/swift-waves-deny.md @@ -0,0 +1,6 @@ +--- +"@gradio/plot": minor +"gradio": minor +--- + +feat:Allow setting plotly margins diff --git a/js/plot/Index.svelte b/js/plot/Index.svelte index 0b3214be5ddac..2585fcb241154 100644 --- a/js/plot/Index.svelte +++ b/js/plot/Index.svelte @@ -65,6 +65,7 @@ {bokeh_version} {show_actions_button} {gradio} + {show_label} {_selectable} {x_lim} on:change={() => gradio.dispatch("change")} diff --git a/js/plot/shared/Plot.svelte b/js/plot/shared/Plot.svelte index 7307854888ab0..df4d7f1903f5f 100644 --- a/js/plot/shared/Plot.svelte +++ b/js/plot/shared/Plot.svelte @@ -8,6 +8,7 @@ export let value; let _value; export let colors: string[] = []; + export let show_label: boolean; export let theme_mode: ThemeMode; export let caption: string; export let bokeh_version: string | null; @@ -61,6 +62,7 @@ {value} {colors} {theme_mode} + {show_label} {caption} {bokeh_version} {show_actions_button} diff --git a/js/plot/shared/plot_types/PlotlyPlot.svelte b/js/plot/shared/plot_types/PlotlyPlot.svelte index f7c6de4117e62..93060ac764bc1 100644 --- a/js/plot/shared/plot_types/PlotlyPlot.svelte +++ b/js/plot/shared/plot_types/PlotlyPlot.svelte @@ -4,6 +4,7 @@ import { afterUpdate, createEventDispatcher } from "svelte"; export let value; + export let show_label: boolean; $: plot = value?.plot; @@ -34,9 +35,14 @@ plotObj.responsive = true; plotObj.layout.autosize = true; - plotObj.layout.title - ? (plotObj.layout.margin = { autoexpand: true }) - : (plotObj.layout.margin = { l: 0, r: 0, b: 0, t: 0 }); + if (plotObj.layout.margin == undefined) { + plotObj.layout.margin = {}; + } + if (plotObj.layout.title && show_label) { + // so title does not get cut off by label + plotObj.layout.margin.t = Math.max(100, plotObj.layout.margin.t || 0); + } + plotObj.layout.margin.autoexpand = true; Plotly.react(plot_div, plotObj.data, plotObj.layout, plotObj.config); Plotly.Plots.resize(plot_div);