Hide x axis labels (#9497)

* changes

* add changeset

* fix

---------

Co-authored-by: Ali Abid <[email protected]>
Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: Abubakar Abid <[email protected]>

Author: 4 people

.changeset/stupid-memes-turn.md

@@ -0,0 +1,6 @@
+---
+"@gradio/nativeplot": minor
+"gradio": minor
+---
+
+feat:Hide x axis labels

gradio/components/native_plot.py

@@ -55,6 +55,7 @@ def __init__(
         y_lim: list[float] | None = None,
         x_label_angle: float = 0,
         y_label_angle: float = 0,
+        x_axis_labels_visible: bool = True,
         caption: str | None = None,
         sort: Literal["x", "y", "-x", "-y"] | list[str] | None = None,
         height: int | None = None,
@@ -90,6 +91,7 @@ def __init__(
             y_lim: A tuple of list containing the limits for the y-axis, specified as [y_min, y_max].
             x_label_angle: The angle of the x-axis labels in degrees offset clockwise.
             y_label_angle: The angle of the y-axis labels in degrees offset clockwise.
+            x_axis_labels_visible: Whether the x-axis labels should be visible. Can be hidden when many x-axis labels are present.
             caption: The (optional) caption to display below the plot.
             sort: The sorting order of the x values, if x column is type string/category. Can be "x", "y", "-x", "-y", or list of strings that represent the order of the categories.
             height: The height of the plot in pixels.
@@ -120,6 +122,7 @@ def __init__(
         self.y_lim = y_lim
         self.x_label_angle = x_label_angle
         self.y_label_angle = y_label_angle
+        self.x_axis_labels_visible = x_axis_labels_visible
         self.caption = caption
         self.sort = sort
         self.height = height

js/nativeplot/Index.svelte

@@ -43,6 +43,7 @@
 	export let y_lim: [number, number] | null = null;
 	export let x_label_angle: number | null = null;
 	export let y_label_angle: number | null = null;
+	export let x_axis_labels_visible = true;
 	export let caption: string | null = null;
 	export let sort: "x" | "y" | "-x" | "-y" | string[] | null = null;
 	function reformat_sort(
@@ -366,7 +367,11 @@
 											value: 0
 										},
 							x: {
-								axis: x_label_angle ? { labelAngle: x_label_angle } : {},
+								axis: {
+									...(x_label_angle !== null && { labelAngle: x_label_angle }),
+									labels: x_axis_labels_visible,
+									ticks: x_axis_labels_visible
+								},
 								field: x,
 								title: x_title || x,
 								type: value.datatypes[x],