Rotate axes labels on LinePlot, BarPlot, and ScatterPlot (#5305)

* add chmod commands to grant execute permissions to each script before running them

* increase the memory limit

* Increase memory requirement to 8

* Setting a minimum specification for codespace machines

* Added label_angle parameter to LinePlot

* add the x_label_angle and y_label_angle to the postprocess

* Add x_label_angle and y_label_angle to ScatterPlot

* Add x_label_angle and y_label_angle to BarPlot

* Remove postCreateCommand update from this PR, it is in its own PR

* Remove custumization on the devcontainer, it is on another PR

* Remove extra line  on the devcontainer, it is on another PR

* add changeset

* update the parameter definition in the docstring

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/rare-words-occur.md

@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Rotate axes labels on LinePlot, BarPlot, and ScatterPlot

gradio/components/bar_plot.py

@@ -38,6 +38,8 @@ def __init__(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         group_title: str | None = None,
         color_legend_position: Literal[
@@ -79,6 +81,8 @@ def __init__(
             tooltip: The column (or list of columns) to display on the tooltip when a user hovers over a bar.
             x_title: The title given to the x axis. By default, uses the value of the x parameter.
             y_title: The title given to the y axis. By default, uses the value of the y parameter.
+            x_label_angle: The angle (in degrees) of the x axis labels. Positive values are clockwise, and negative values are counter-clockwise.
+            y_label_angle: The angle (in degrees) of the y axis labels. Positive values are clockwise, and negative values are counter-clockwise.
             color_legend_title: The title given to the color legend. By default, uses the value of color parameter.
             group_title: The label displayed on top of the subplot columns (or rows if vertical=True). Use an empty string to omit.
             color_legend_position: The position of the color legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
@@ -104,6 +108,8 @@ def __init__(
         self.title = title
         self.x_title = x_title
         self.y_title = y_title
+        self.x_label_angle = x_label_angle
+        self.y_label_angle = y_label_angle
         self.color_legend_title = color_legend_title
         self.group_title = group_title
         self.color_legend_position = color_legend_position
@@ -145,6 +151,8 @@ def update(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         group_title: str | None = None,
         color_legend_position: Literal[
@@ -186,6 +194,8 @@ def update(
             tooltip: The column (or list of columns) to display on the tooltip when a user hovers over a bar.
             x_title: The title given to the x axis. By default, uses the value of the x parameter.
             y_title: The title given to the y axis. By default, uses the value of the y parameter.
+            x_label_angle: The angle (in degrees) of the x axis labels. Positive values are clockwise, and negative values are counter-clockwise.
+            y_label_angle: The angle (in degrees) of the y axis labels. Positive values are clockwise, and negative values are counter-clockwise.
             color_legend_title: The title given to the color legend. By default, uses the value of color parameter.
             group_title: The label displayed on top of the subplot columns (or rows if vertical=True). Use an empty string to omit.
             color_legend_position: The position of the color legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
@@ -208,6 +218,8 @@ def update(
             tooltip,
             x_title,
             y_title,
+            x_label_angle,
+            y_label_angle,
             color_legend_title,
             group_title,
             color_legend_position,
@@ -257,6 +269,8 @@ def create_plot(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         group_title: str | None = None,
         color_legend_position: Literal[
@@ -305,11 +319,17 @@ def create_plot(
                 x,  # type: ignore
                 title=x_title,  # type: ignore
                 scale=AltairPlot.create_scale(x_lim),  # type: ignore
+                axis=alt.Axis(labelAngle=x_label_angle)
+                if x_label_angle is not None
+                else alt.Axis(),
             ),
             y=alt.Y(
                 y,  # type: ignore
                 title=y_title,  # type: ignore
                 scale=AltairPlot.create_scale(y_lim),  # type: ignore
+                axis=alt.Axis(labelAngle=x_label_angle)
+                if x_label_angle is not None
+                else alt.Axis(),
             ),
             **orientation,
         )
@@ -364,6 +384,8 @@ def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None:
             tooltip=self.tooltip,
             x_title=self.x_title,
             y_title=self.y_title,
+            x_label_angle=self.x_label_angle,
+            y_label_angle=self.y_label_angle,
             color_legend_title=self.color_legend_title,
             color_legend_position=self.color_legend_position,  # type: ignore
             group_title=self.group_title,

gradio/components/line_plot.py

@@ -38,6 +38,8 @@ def __init__(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         stroke_dash_legend_title: str | None = None,
         color_legend_position: Literal[
@@ -92,6 +94,8 @@ def __init__(
             tooltip: The column (or list of columns) to display on the tooltip when a user hovers a point on the plot.
             x_title: The title given to the x axis. By default, uses the value of the x parameter.
             y_title: The title given to the y axis. By default, uses the value of the y parameter.
+            x_label_angle: The angle for the x axis labels. Positive values are clockwise, and negative values are counter-clockwise.
+            y_label_angle: The angle for the y axis labels. Positive values are clockwise, and negative values are counter-clockwise.
             color_legend_title: The title given to the color legend. By default, uses the value of color parameter.
             stroke_dash_legend_title: The title given to the stroke_dash legend. By default, uses the value of the stroke_dash parameter.
             color_legend_position: The position of the color legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation.
@@ -117,6 +121,8 @@ def __init__(
         self.title = title
         self.x_title = x_title
         self.y_title = y_title
+        self.x_label_angle = x_label_angle
+        self.y_label_angle = y_label_angle
         self.color_legend_title = color_legend_title
         self.stroke_dash_legend_title = stroke_dash_legend_title
         self.color_legend_position = color_legend_position
@@ -161,6 +167,8 @@ def update(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         stroke_dash_legend_title: str | None = None,
         color_legend_position: Literal[
@@ -215,6 +223,8 @@ def update(
             tooltip: The column (or list of columns) to display on the tooltip when a user hovers a point on the plot.
             x_title: The title given to the x axis. By default, uses the value of the x parameter.
             y_title: The title given to the y axis. By default, uses the value of the y parameter.
+            x_label_angle:  The angle for the x axis labels. Positive values are clockwise, and negative values are counter-clockwise.
+            y_label_angle:  The angle for the y axis labels. Positive values are clockwise, and negative values are counter-clockwise.
             color_legend_title: The title given to the color legend. By default, uses the value of color parameter.
             stroke_dash_legend_title: The title given to the stroke legend. By default, uses the value of stroke parameter.
             color_legend_position: The position of the color legend. If the string value 'none' is passed, this legend is omitted. For other valid position values see: https://vega.github.io/vega/docs/legends/#orientation
@@ -239,6 +249,8 @@ def update(
             tooltip,
             x_title,
             y_title,
+            x_label_angle,
+            y_label_angle,
             color_legend_title,
             stroke_dash_legend_title,
             color_legend_position,
@@ -290,6 +302,8 @@ def create_plot(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         stroke_dash_legend_title: str | None = None,
         color_legend_position: Literal[
@@ -329,11 +343,17 @@ def create_plot(
                 x,  # type: ignore
                 title=x_title or x,  # type: ignore
                 scale=AltairPlot.create_scale(x_lim),  # type: ignore
+                axis=alt.Axis(labelAngle=x_label_angle)
+                if x_label_angle is not None
+                else alt.Axis(),
             ),
             "y": alt.Y(
                 y,  # type: ignore
                 title=y_title or y,  # type: ignore
                 scale=AltairPlot.create_scale(y_lim),  # type: ignore
+                axis=alt.Axis(labelAngle=y_label_angle)
+                if y_label_angle is not None
+                else alt.Axis(),
             ),
         }
         properties = {}
@@ -415,6 +435,8 @@ def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None:
             tooltip=self.tooltip,
             x_title=self.x_title,
             y_title=self.y_title,
+            x_label_angle=self.x_label_angle,
+            y_label_angle=self.y_label_angle,
             color_legend_title=self.color_legend_title,  # type: ignore
             color_legend_position=self.color_legend_position,  # type: ignore
             stroke_dash_legend_title=self.stroke_dash_legend_title,

gradio/components/scatter_plot.py

@@ -40,6 +40,8 @@ def __init__(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         size_legend_title: str | None = None,
         shape_legend_title: str | None = None,
@@ -105,8 +107,10 @@ def __init__(
             shape: The column used to determine the point shape. Should contain categorical data. Gradio will map each unique value to a different shape.
             title: The title to display on top of the chart.
             tooltip: The column (or list of columns) to display on the tooltip when a user hovers a point on the plot.
-            x_title: The title given to the x axis. By default, uses the value of the x parameter.
-            y_title: The title given to the y axis. By default, uses the value of the y parameter.
+            x_title: The title given to the x-axis. By default, uses the value of the x parameter.
+            y_title: The title given to the y-axis. By default, uses the value of the y parameter.
+            x_label_angle:  The angle for the x axis labels rotation. Positive values are clockwise, and negative values are counter-clockwise.
+            y_label_angle:  The angle for the y axis labels rotation. Positive values are clockwise, and negative values are counter-clockwise.
             color_legend_title: The title given to the color legend. By default, uses the value of color parameter.
             size_legend_title: The title given to the size legend. By default, uses the value of the size parameter.
             shape_legend_title: The title given to the shape legend. By default, uses the value of the shape parameter.
@@ -135,6 +139,8 @@ def __init__(
         self.title = title
         self.x_title = x_title
         self.y_title = y_title
+        self.x_label_angle = x_label_angle
+        self.y_label_angle = y_label_angle
         self.color_legend_title = color_legend_title
         self.color_legend_position = color_legend_position
         self.size_legend_title = size_legend_title
@@ -180,6 +186,8 @@ def update(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         size_legend_title: str | None = None,
         shape_legend_title: str | None = None,
@@ -247,6 +255,8 @@ def update(
             tooltip: The column (or list of columns) to display on the tooltip when a user hovers a point on the plot.
             x_title: The title given to the x axis. By default, uses the value of the x parameter.
             y_title: The title given to the y axis. By default, uses the value of the y parameter.
+            x_label_angle:  The angle for the x axis labels rotation. Positive values are clockwise, and negative values are counter-clockwise.
+            y_label_angle:  The angle for the y axis labels rotation. Positive values are clockwise, and negative values are counter-clockwise.
             color_legend_title: The title given to the color legend. By default, uses the value of color parameter.
             size_legend_title: The title given to the size legend. By default, uses the value of the size parameter.
             shape_legend_title: The title given to the shape legend. By default, uses the value of the shape parameter.
@@ -273,6 +283,8 @@ def update(
             tooltip,
             x_title,
             y_title,
+            x_label_angle,
+            y_label_angle,
             color_legend_title,
             size_legend_title,
             shape_legend_title,
@@ -326,6 +338,8 @@ def create_plot(
         tooltip: list[str] | str | None = None,
         x_title: str | None = None,
         y_title: str | None = None,
+        x_label_angle: float | None = None,
+        y_label_angle: float | None = None,
         color_legend_title: str | None = None,
         size_legend_title: str | None = None,
         shape_legend_title: str | None = None,
@@ -378,11 +392,17 @@ def create_plot(
                 x,  # type: ignore
                 title=x_title or x,  # type: ignore
                 scale=AltairPlot.create_scale(x_lim),  # type: ignore
+                axis=alt.Axis(labelAngle=x_label_angle)
+                if x_label_angle is not None
+                else alt.Axis(),
             ),  # ignore: type
             "y": alt.Y(
                 y,  # type: ignore
                 title=y_title or y,  # type: ignore
                 scale=AltairPlot.create_scale(y_lim),  # type: ignore
+                axis=alt.Axis(labelAngle=y_label_angle)
+                if y_label_angle is not None
+                else alt.Axis(),
             ),
         }
         properties = {}
@@ -456,6 +476,8 @@ def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None:
             tooltip=self.tooltip,
             x_title=self.x_title,
             y_title=self.y_title,
+            x_label_angle=self.x_label_angle,
+            y_label_angle=self.y_label_angle,
             color_legend_title=self.color_legend_title,
             size_legend_title=self.size_legend_title,
             shape_legend_title=self.size_legend_title,