Allow setting plotly margins (#9805)

* changes

* add changeset

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/swift-waves-deny.md

@@ -0,0 +1,6 @@
+---
+"@gradio/plot": minor
+"gradio": minor
+---
+
+feat:Allow setting plotly margins

js/plot/Index.svelte

@@ -65,6 +65,7 @@
 		{bokeh_version}
 		{show_actions_button}
 		{gradio}
+		{show_label}
 		{_selectable}
 		{x_lim}
 		on:change={() => gradio.dispatch("change")}

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}

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);