Improved plot rendering

.changeset/twenty-jokes-argue.md

@@ -0,0 +1,6 @@
+---
+"@gradio/plot": patch
+"gradio": patch
+---
+
+feat:Improved plot rendering

demo/native_plots/bar_plot_demo.py

@@ -98,14 +98,14 @@ def bar_plot_fn(display):
 
 
 with gr.Blocks() as bar_plot:
-    with gr.Row():
-        with gr.Column():
-            display = gr.Dropdown(
-                choices=["simple", "stacked", "grouped", "simple-horizontal", "stacked-horizontal", "grouped-horizontal"],
-                value="simple",
-                label="Type of Bar Plot"
-            )
-        with gr.Column():
-            plot = gr.BarPlot(show_label=False, show_actions_button=True)
+    display = gr.Dropdown(
+        choices=["simple", "stacked", "grouped", "simple-horizontal", "stacked-horizontal", "grouped-horizontal"],
+        value="simple",
+        label="Type of Bar Plot"
+    )
+    plot = gr.BarPlot(show_label=False, show_actions_button=True)
     display.change(bar_plot_fn, inputs=display, outputs=plot)
     bar_plot.load(fn=bar_plot_fn, inputs=display, outputs=plot)
+
+if __name__ == "__main__":
+    bar_plot.launch()

demo/native_plots/line_plot_demo.py

@@ -78,14 +78,11 @@ def line_plot_fn(dataset):
 
 
 with gr.Blocks() as line_plot:
-    with gr.Row():
-        with gr.Column():
-            dataset = gr.Dropdown(
-                choices=["stocks", "climate", "seattle_weather", "gapminder"],
-                value="stocks",
-            )
-        with gr.Column():
-            plot = gr.LinePlot()
+    dataset = gr.Dropdown(
+        choices=["stocks", "climate", "seattle_weather", "gapminder"],
+        value="stocks",
+    )
+    plot = gr.LinePlot()
     dataset.change(line_plot_fn, inputs=dataset, outputs=plot)
     line_plot.load(fn=line_plot_fn, inputs=dataset, outputs=plot)
 

demo/native_plots/scatter_plot_demo.py

@@ -35,11 +35,8 @@ def scatter_plot_fn(dataset):
 
 
 with gr.Blocks() as scatter_plot:
-    with gr.Row():
-        with gr.Column():
-            dataset = gr.Dropdown(choices=["cars", "iris"], value="cars")
-        with gr.Column():
-            plot = gr.ScatterPlot(show_label=False)
+    dataset = gr.Dropdown(choices=["cars", "iris"], value="cars")
+    plot = gr.ScatterPlot(show_label=False)
     dataset.change(scatter_plot_fn, inputs=dataset, outputs=plot)
     scatter_plot.load(fn=scatter_plot_fn, inputs=dataset, outputs=plot)
 

gradio/components/bar_plot.py

@@ -126,6 +126,8 @@ def __init__(
         self.height = height
         self.sort = sort
         self.show_actions_button = show_actions_button
+        if label is None and show_label is None:
+            show_label = False
         super().__init__(
             value=value,
             label=label,
@@ -234,14 +236,15 @@ def create_plot(
             properties["width"] = width
 
         if color:
+            color_legend_position = color_legend_position or "bottom"
             domain = value[color].unique().tolist()
             range_ = list(range(len(domain)))
             encodings["color"] = {
                 "field": color,
                 "type": "nominal",
                 "scale": {"domain": domain, "range": range_},
                 "legend": AltairPlot.create_legend(
-                    position=color_legend_position, title=color_legend_title or color
+                    position=color_legend_position, title=color_legend_title
                 ),
             }
 

gradio/components/line_plot.py

@@ -139,6 +139,8 @@ def __init__(
         self.width = width
         self.height = height
         self.show_actions_button = show_actions_button
+        if label is None and show_label is None:
+            show_label = False
         super().__init__(
             value=value,
             label=label,
@@ -234,14 +236,15 @@ def create_plot(
             properties["width"] = width
 
         if color:
+            color_legend_position = color_legend_position or "bottom"
             domain = value[color].unique().tolist()
             range_ = list(range(len(domain)))
             encodings["color"] = {
                 "field": color,
                 "type": "nominal",
                 "scale": {"domain": domain, "range": range_},
                 "legend": AltairPlot.create_legend(
-                    position=color_legend_position, title=color_legend_title or color
+                    position=color_legend_position, title=color_legend_title
                 ),
             }
 

gradio/components/scatter_plot.py

@@ -156,6 +156,8 @@ def __init__(
         self.x_lim = x_lim
         self.y_lim = y_lim
         self.show_actions_button = show_actions_button
+        if label is None and show_label is None:
+            show_label = False
         super().__init__(
             value=value,
             label=label,
@@ -273,11 +275,12 @@ def create_plot(
                 range_ = list(range(len(domain)))
                 type_ = "nominal"
 
+            color_legend_position = color_legend_position or "bottom"
             encodings["color"] = {
                 "field": color,
                 "type": type_,
                 "legend": AltairPlot.create_legend(
-                    position=color_legend_position, title=color_legend_title or color
+                    position=color_legend_position, title=color_legend_title
                 ),
                 "scale": {"domain": domain, "range": range_},
             }

js/plot/package.json

@@ -14,8 +14,8 @@
 		"@gradio/utils": "workspace:^",
 		"@rollup/plugin-json": "^6.0.0",
 		"plotly.js-dist-min": "^2.10.1",
-		"svelte-vega": "^2.0.0",
-		"vega": "^5.22.1",
+		"vega": "^5.23.0",
+		"vega-embed": "^6.25.0",
 		"vega-lite": "^5.12.0"
 	},
 	"devDependencies": {