Allow setting plotly margins (#9805)

* changes * add changeset --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Oct 25, 2024 · 78e3b51 · 78e3b51
1 parent a4e70f3
commit 78e3b51
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/swift-waves-deny.md 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
@@ -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
@@ -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
@@ -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);