From e836adb1d92d95ec3e9799d70140a63ea76d27f4 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 04:33:00 -0400
Subject: [PATCH 01/34] add matplotlib chart example

---
 doc/gui/examples/charts/matplotlib_scatter.py | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 doc/gui/examples/charts/matplotlib_scatter.py

diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
new file mode 100644
index 0000000000..5683b4cf21
--- /dev/null
+++ b/doc/gui/examples/charts/matplotlib_scatter.py
@@ -0,0 +1,73 @@
+from taipy.gui import Gui
+
+# Read the saved HTML chart
+with open("chart.html", "r") as f:
+    html_str = f.read()
+
+# Define the page content with the interactive chart
+page_md = f"""
+# Taipy Matplotlib Enhanced 2D Scatter Plot Page
+
+This page contains an enhanced 2D scatter plot created with Matplotlib:
+
+<figure style="width: 100%; height: auto; display: flex; justify-content: center;">
+    {html_str}
+</figure>
+
+## Code
+
+The following Python code was used to generate the chart:
+
+```python
+import matplotlib.pyplot as plt
+import numpy as np
+import mpld3
+
+plt.style.use('_mpl-gallery')
+
+# Make the data
+np.random.seed(3)
+x = np.random.uniform(1, 6, 24)  # Random x values within 1-6
+y = np.random.uniform(1, 6, 24)  # Random y values within 1-6
+
+# Size and color
+sizes = np.random.uniform(300, 800, len(x))  # Adjusted sizes for better fit
+colors = np.random.uniform(50, 100, len(x))  # Greenish colors
+
+# Plot
+fig, ax = plt.subplots(figsize=(10, 6))
+scatter = ax.scatter(x, y, s=sizes, c=colors, cmap="Greens", vmin=30, vmax=80)
+ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
+
+# Add axis labels
+ax.set_xlabel('Performance Score')
+ax.set_ylabel('Happiness Index')
+ax.set_title('Employee Performance vs. Happiness')
+
+# Example labels for bubbles
+for i in range(len(x)):
+    ax.text(x[i], y[i], f'Employee {i+1}', fontsize=9, ha='right')
+
+# Create legend for bubble sizes
+legend_labels = np.unique(np.round(sizes, decimals=-1))
+for label in legend_labels:
+    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
+
+legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
+ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
+ax.add_artist(legend1)
+
+# Convert the plot to an interactive HTML
+html_str = mpld3.fig_to_html(fig)
+
+# Save the HTML to a file
+with open("chart.html", "w") as f:
+    f.write(html_str)
+
+# Show the plot in a browser
+mpld3.show()
+\```
+
+\```
+
+Gui(page_md).run()

From 7c7c237a732906b76217b828d134feb209d39cdd Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 04:33:22 -0400
Subject: [PATCH 02/34] add matplotlib taipy chart example

---
 doc/gui/examples/charts/matplotlib_chart.py | 47 +++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 doc/gui/examples/charts/matplotlib_chart.py

diff --git a/doc/gui/examples/charts/matplotlib_chart.py b/doc/gui/examples/charts/matplotlib_chart.py
new file mode 100644
index 0000000000..75d5dd52d3
--- /dev/null
+++ b/doc/gui/examples/charts/matplotlib_chart.py
@@ -0,0 +1,47 @@
+import matplotlib.pyplot as plt
+import numpy as np
+import mpld3
+
+plt.style.use('_mpl-gallery')
+
+# Make the data
+np.random.seed(3)
+x = np.random.uniform(1, 6, 10)  # Random x values within 1-6
+y = np.random.uniform(1, 6, 10)  # Random y values within 1-6
+
+# Size and color
+sizes = np.random.uniform(300, 600, len(x))  # Adjusted sizes for better fit
+colors = np.random.uniform(50, 100, len(x))  # Greenish colors
+
+# Plot
+fig, ax = plt.subplots(figsize=(10, 6))
+scatter = ax.scatter(x, y, s=sizes, c=colors, cmap="Greens", vmin=30, vmax=80)
+ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
+
+# Add axis labels
+ax.set_xlabel('Performance Score')
+ax.set_ylabel('Happiness Index')
+ax.set_title('Employee Performance vs. Happiness')
+
+# Example labels for bubbles
+for i in range(len(x)):
+    ax.text(x[i], y[i], f'Employee {i+1}', fontsize=16, ha='right')
+
+# Create legend for bubble sizes
+legend_labels = np.unique(np.round(sizes, decimals=-1))
+for label in legend_labels:
+    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
+
+legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
+ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
+ax.add_artist(legend1)
+
+# Convert the plot to an interactive HTML
+html_str = mpld3.fig_to_html(fig)
+
+# Save the HTML to a file
+with open("chart.html", "w") as f:
+    f.write(html_str)
+
+# Show the plot in a browser
+mpld3.show()

From 40ac40ee3c945db72e096fd71c0651e901d14c65 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 15:08:49 -0400
Subject: [PATCH 03/34] add matplotlib scatter md py

---
 doc/gui/examples/charts/matplotlib_scatter.py | 63 +++++++------------
 1 file changed, 21 insertions(+), 42 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
index 5683b4cf21..326485815e 100644
--- a/doc/gui/examples/charts/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib_scatter.py
@@ -1,52 +1,29 @@
 from taipy.gui import Gui
-
-# Read the saved HTML chart
-with open("chart.html", "r") as f:
-    html_str = f.read()
-
-# Define the page content with the interactive chart
-page_md = f"""
-# Taipy Matplotlib Enhanced 2D Scatter Plot Page
-
-This page contains an enhanced 2D scatter plot created with Matplotlib:
-
-<figure style="width: 100%; height: auto; display: flex; justify-content: center;">
-    {html_str}
-</figure>
-
-## Code
-
-The following Python code was used to generate the chart:
-
-```python
 import matplotlib.pyplot as plt
-import numpy as np
 import mpld3
+import numpy as np  # Import numpy
 
-plt.style.use('_mpl-gallery')
-
-# Make the data
-np.random.seed(3)
-x = np.random.uniform(1, 6, 24)  # Random x values within 1-6
-y = np.random.uniform(1, 6, 24)  # Random y values within 1-6
+# Define data
+employee_performance = [5, 4.8, 4.5, 4.2, 3.9, 3.7, 4.1, 4.6, 5.0, 4.3]
+happiness_scores = [5, 4.5, 4.2, 4.0, 3.8, 3.9, 4.3, 4.7, 4.9, 4.4]
 
-# Size and color
-sizes = np.random.uniform(300, 800, len(x))  # Adjusted sizes for better fit
-colors = np.random.uniform(50, 100, len(x))  # Greenish colors
+# Calculate sizes based on product of performance and happiness
+sizes = [e * h * 50 for e, h in zip(employee_performance, happiness_scores)]
+colors = sizes  # Color based on sizes
 
 # Plot
 fig, ax = plt.subplots(figsize=(10, 6))
-scatter = ax.scatter(x, y, s=sizes, c=colors, cmap="Greens", vmin=30, vmax=80)
+scatter = ax.scatter(employee_performance, happiness_scores, s=sizes, c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
 ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
 
-# Add axis labels
+# Add axis labels and title
 ax.set_xlabel('Performance Score')
 ax.set_ylabel('Happiness Index')
 ax.set_title('Employee Performance vs. Happiness')
 
 # Example labels for bubbles
-for i in range(len(x)):
-    ax.text(x[i], y[i], f'Employee {i+1}', fontsize=9, ha='right')
+for i in range(len(employee_performance)):
+    ax.text(employee_performance[i], happiness_scores[i], f'Emp {i+1}', fontsize=9, ha='right')
 
 # Create legend for bubble sizes
 legend_labels = np.unique(np.round(sizes, decimals=-1))
@@ -60,14 +37,16 @@
 # Convert the plot to an interactive HTML
 html_str = mpld3.fig_to_html(fig)
 
-# Save the HTML to a file
-with open("chart.html", "w") as f:
-    f.write(html_str)
+# Define Taipy page content
+page_md = f"""
+# Enhanced 2D Scatter Plot
 
-# Show the plot in a browser
-mpld3.show()
-\```
+This page contains an enhanced 2D scatter plot created with Matplotlib:
 
-\```
+<figure style="width: 100%; height: auto; display: flex; justify-content: center;">
+    
+</figure>
+"""
 
-Gui(page_md).run()
+if __name__ == "__main__":
+    Gui(page_md).run(title="Chart Scatter Matplotlib")

From f5c15ab0dd2edd9df7e12d79b5ef2cc33b0e0b22 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 15:40:04 -0400
Subject: [PATCH 04/34] update matplotlib scatter md

---
 doc/gui/examples/charts/matplotlib_scatter.py | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
index 326485815e..7fa9519de2 100644
--- a/doc/gui/examples/charts/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib_scatter.py
@@ -1,7 +1,8 @@
 from taipy.gui import Gui
+import matplotlib
+matplotlib.use('Agg')  # Use a non-interactive backend
 import matplotlib.pyplot as plt
-import mpld3
-import numpy as np  # Import numpy
+import numpy as np
 
 # Define data
 employee_performance = [5, 4.8, 4.5, 4.2, 3.9, 3.7, 4.1, 4.6, 5.0, 4.3]
@@ -25,27 +26,27 @@
 for i in range(len(employee_performance)):
     ax.text(employee_performance[i], happiness_scores[i], f'Emp {i+1}', fontsize=9, ha='right')
 
-# Create legend for bubble sizes
-legend_labels = np.unique(np.round(sizes, decimals=-1))
-for label in legend_labels:
-    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
-
-legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
-ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
-ax.add_artist(legend1)
-
 # Convert the plot to an interactive HTML
 html_str = mpld3.fig_to_html(fig)
 
+# Structure data for Taipy
+data = {
+    "x": employee_performance,
+    "y": happiness_scores,
+    "marker": {
+        "size": sizes,
+        "color": colors,
+        "colorscale": "Greens"
+    }
+}
+
 # Define Taipy page content
-page_md = f"""
+page_md = """
 # Enhanced 2D Scatter Plot
 
 This page contains an enhanced 2D scatter plot created with Matplotlib:
 
-<figure style="width: 100%; height: auto; display: flex; justify-content: center;">
-    
-</figure>
+<|{data}|chart|mode=markers|x=x|y=y|marker={marker}|>
 """
 
 if __name__ == "__main__":

From 8036a1e0c4a27ca52c310b048f37a1d6bdea6e64 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 16:22:49 -0400
Subject: [PATCH 05/34] update matplotlib scatter py

---
 doc/gui/examples/charts/matplotlib_scatter.py | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
index 7fa9519de2..7a41fb3e7a 100644
--- a/doc/gui/examples/charts/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib_scatter.py
@@ -1,8 +1,8 @@
 from taipy.gui import Gui
 import matplotlib
-matplotlib.use('Agg')  # Use a non-interactive backend
 import matplotlib.pyplot as plt
 import numpy as np
+import mpld3
 
 # Define data
 employee_performance = [5, 4.8, 4.5, 4.2, 3.9, 3.7, 4.1, 4.6, 5.0, 4.3]
@@ -12,12 +12,10 @@
 sizes = [e * h * 50 for e, h in zip(employee_performance, happiness_scores)]
 colors = sizes  # Color based on sizes
 
-# Plot
-fig, ax = plt.subplots(figsize=(10, 6))
+# Create the Matplotlib figure
+figure, ax = plt.subplots(figsize=(10, 6))
 scatter = ax.scatter(employee_performance, happiness_scores, s=sizes, c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
 ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
-
-# Add axis labels and title
 ax.set_xlabel('Performance Score')
 ax.set_ylabel('Happiness Index')
 ax.set_title('Employee Performance vs. Happiness')
@@ -26,28 +24,32 @@
 for i in range(len(employee_performance)):
     ax.text(employee_performance[i], happiness_scores[i], f'Emp {i+1}', fontsize=9, ha='right')
 
+# Create legend for bubble sizes
+legend_labels = np.unique(np.round(sizes, decimals=-1))
+for label in legend_labels:
+    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
+
+legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
+ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
+ax.add_artist(legend1)
+
+# Ensure figure is rendered in Taipy
+figure.tight_layout()
+
 # Convert the plot to an interactive HTML
-html_str = mpld3.fig_to_html(fig)
-
-# Structure data for Taipy
-data = {
-    "x": employee_performance,
-    "y": happiness_scores,
-    "marker": {
-        "size": sizes,
-        "color": colors,
-        "colorscale": "Greens"
-    }
-}
+#html_str = mpld3.fig_to_html(figure)
+
+# Show the plot in a browser
+#mpld3.show()
 
 # Define Taipy page content
-page_md = """
+page = f"""
 # Enhanced 2D Scatter Plot
 
 This page contains an enhanced 2D scatter plot created with Matplotlib:
 
-<|{data}|chart|mode=markers|x=x|y=y|marker={marker}|>
+<|data={figure}|chart|height=520px|>
 """
 
 if __name__ == "__main__":
-    Gui(page_md).run(title="Chart Scatter Matplotlib")
+    Gui(page).run(title="Chart Scatter Matplotlib")

From 62de9a17b424240d020a3c715477e73afc010bd9 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:12:46 -0400
Subject: [PATCH 06/34] update matplotlib scatter

---
 doc/gui/examples/charts/matplotlib_scatter.py | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
index 7a41fb3e7a..de2e48a784 100644
--- a/doc/gui/examples/charts/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib_scatter.py
@@ -1,5 +1,4 @@
 from taipy.gui import Gui
-import matplotlib
 import matplotlib.pyplot as plt
 import numpy as np
 import mpld3
@@ -13,7 +12,7 @@
 colors = sizes  # Color based on sizes
 
 # Create the Matplotlib figure
-figure, ax = plt.subplots(figsize=(10, 6))
+fig, ax = plt.subplots(figsize=(12, 8))  # Adjust figsize for better height
 scatter = ax.scatter(employee_performance, happiness_scores, s=sizes, c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
 ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
 ax.set_xlabel('Performance Score')
@@ -29,26 +28,20 @@
 for label in legend_labels:
     ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
 
-legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
-ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
+# Only one legend on the left side
+legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper left", frameon=True, fontsize=10)
 ax.add_artist(legend1)
 
-# Ensure figure is rendered in Taipy
-figure.tight_layout()
-
 # Convert the plot to an interactive HTML
-#html_str = mpld3.fig_to_html(figure)
-
-# Show the plot in a browser
-#mpld3.show()
+html_str = mpld3.fig_to_html(fig)
 
 # Define Taipy page content
-page = f"""
+page = """
 # Enhanced 2D Scatter Plot
 
 This page contains an enhanced 2D scatter plot created with Matplotlib:
 
-<|data={figure}|chart|height=520px|>
+<|part|content={fig}|height=600px>
 """
 
 if __name__ == "__main__":

From 6b923225b060c59788b816cd90270c3dba0c8e6d Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:13:52 -0400
Subject: [PATCH 07/34] update matplotlib scatter

---
 doc/gui/examples/charts/matplotlib_scatter.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
index de2e48a784..48a1834d2a 100644
--- a/doc/gui/examples/charts/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib_scatter.py
@@ -33,7 +33,7 @@
 ax.add_artist(legend1)
 
 # Convert the plot to an interactive HTML
-html_str = mpld3.fig_to_html(fig)
+# html_str = mpld3.fig_to_html(fig)
 
 # Define Taipy page content
 page = """

From 117e2008782a9b8942a6f6af26e370339a0ce595 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:45:51 -0400
Subject: [PATCH 08/34] move to matplotlib folder

---
 doc/gui/examples/charts/matplotlib_chart.py   | 47 ------------------
 doc/gui/examples/charts/matplotlib_scatter.py | 48 -------------------
 2 files changed, 95 deletions(-)
 delete mode 100644 doc/gui/examples/charts/matplotlib_chart.py
 delete mode 100644 doc/gui/examples/charts/matplotlib_scatter.py

diff --git a/doc/gui/examples/charts/matplotlib_chart.py b/doc/gui/examples/charts/matplotlib_chart.py
deleted file mode 100644
index 75d5dd52d3..0000000000
--- a/doc/gui/examples/charts/matplotlib_chart.py
+++ /dev/null
@@ -1,47 +0,0 @@
-import matplotlib.pyplot as plt
-import numpy as np
-import mpld3
-
-plt.style.use('_mpl-gallery')
-
-# Make the data
-np.random.seed(3)
-x = np.random.uniform(1, 6, 10)  # Random x values within 1-6
-y = np.random.uniform(1, 6, 10)  # Random y values within 1-6
-
-# Size and color
-sizes = np.random.uniform(300, 600, len(x))  # Adjusted sizes for better fit
-colors = np.random.uniform(50, 100, len(x))  # Greenish colors
-
-# Plot
-fig, ax = plt.subplots(figsize=(10, 6))
-scatter = ax.scatter(x, y, s=sizes, c=colors, cmap="Greens", vmin=30, vmax=80)
-ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
-
-# Add axis labels
-ax.set_xlabel('Performance Score')
-ax.set_ylabel('Happiness Index')
-ax.set_title('Employee Performance vs. Happiness')
-
-# Example labels for bubbles
-for i in range(len(x)):
-    ax.text(x[i], y[i], f'Employee {i+1}', fontsize=16, ha='right')
-
-# Create legend for bubble sizes
-legend_labels = np.unique(np.round(sizes, decimals=-1))
-for label in legend_labels:
-    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
-
-legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
-ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
-ax.add_artist(legend1)
-
-# Convert the plot to an interactive HTML
-html_str = mpld3.fig_to_html(fig)
-
-# Save the HTML to a file
-with open("chart.html", "w") as f:
-    f.write(html_str)
-
-# Show the plot in a browser
-mpld3.show()
diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
deleted file mode 100644
index 48a1834d2a..0000000000
--- a/doc/gui/examples/charts/matplotlib_scatter.py
+++ /dev/null
@@ -1,48 +0,0 @@
-from taipy.gui import Gui
-import matplotlib.pyplot as plt
-import numpy as np
-import mpld3
-
-# Define data
-employee_performance = [5, 4.8, 4.5, 4.2, 3.9, 3.7, 4.1, 4.6, 5.0, 4.3]
-happiness_scores = [5, 4.5, 4.2, 4.0, 3.8, 3.9, 4.3, 4.7, 4.9, 4.4]
-
-# Calculate sizes based on product of performance and happiness
-sizes = [e * h * 50 for e, h in zip(employee_performance, happiness_scores)]
-colors = sizes  # Color based on sizes
-
-# Create the Matplotlib figure
-fig, ax = plt.subplots(figsize=(12, 8))  # Adjust figsize for better height
-scatter = ax.scatter(employee_performance, happiness_scores, s=sizes, c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
-ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
-ax.set_xlabel('Performance Score')
-ax.set_ylabel('Happiness Index')
-ax.set_title('Employee Performance vs. Happiness')
-
-# Example labels for bubbles
-for i in range(len(employee_performance)):
-    ax.text(employee_performance[i], happiness_scores[i], f'Emp {i+1}', fontsize=9, ha='right')
-
-# Create legend for bubble sizes
-legend_labels = np.unique(np.round(sizes, decimals=-1))
-for label in legend_labels:
-    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
-
-# Only one legend on the left side
-legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper left", frameon=True, fontsize=10)
-ax.add_artist(legend1)
-
-# Convert the plot to an interactive HTML
-# html_str = mpld3.fig_to_html(fig)
-
-# Define Taipy page content
-page = """
-# Enhanced 2D Scatter Plot
-
-This page contains an enhanced 2D scatter plot created with Matplotlib:
-
-<|part|content={fig}|height=600px>
-"""
-
-if __name__ == "__main__":
-    Gui(page).run(title="Chart Scatter Matplotlib")

From 4d68408ee30980580c3604deb91e1993aa23e7bb Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:46:03 -0400
Subject: [PATCH 09/34] add custom css

---
 doc/gui/examples/charts/matplotlib/styles.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 doc/gui/examples/charts/matplotlib/styles.css

diff --git a/doc/gui/examples/charts/matplotlib/styles.css b/doc/gui/examples/charts/matplotlib/styles.css
new file mode 100644
index 0000000000..d6e5161f60
--- /dev/null
+++ b/doc/gui/examples/charts/matplotlib/styles.css
@@ -0,0 +1,14 @@
+div.taipy-part.MuiBox-root {
+    height: 560px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+img{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 100%;
+    max-width: 100%;
+}

From 911a802d8f7884ddc49abe2e405d558561814f2e Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:46:29 -0400
Subject: [PATCH 10/34] moved matplotlib example files

---
 .../charts/matplotlib/matplotlib_chart.py     | 47 ++++++++++++++++
 .../charts/matplotlib/matplotlib_scatter.py   | 53 +++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 doc/gui/examples/charts/matplotlib/matplotlib_chart.py
 create mode 100644 doc/gui/examples/charts/matplotlib/matplotlib_scatter.py

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_chart.py b/doc/gui/examples/charts/matplotlib/matplotlib_chart.py
new file mode 100644
index 0000000000..75d5dd52d3
--- /dev/null
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_chart.py
@@ -0,0 +1,47 @@
+import matplotlib.pyplot as plt
+import numpy as np
+import mpld3
+
+plt.style.use('_mpl-gallery')
+
+# Make the data
+np.random.seed(3)
+x = np.random.uniform(1, 6, 10)  # Random x values within 1-6
+y = np.random.uniform(1, 6, 10)  # Random y values within 1-6
+
+# Size and color
+sizes = np.random.uniform(300, 600, len(x))  # Adjusted sizes for better fit
+colors = np.random.uniform(50, 100, len(x))  # Greenish colors
+
+# Plot
+fig, ax = plt.subplots(figsize=(10, 6))
+scatter = ax.scatter(x, y, s=sizes, c=colors, cmap="Greens", vmin=30, vmax=80)
+ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
+
+# Add axis labels
+ax.set_xlabel('Performance Score')
+ax.set_ylabel('Happiness Index')
+ax.set_title('Employee Performance vs. Happiness')
+
+# Example labels for bubbles
+for i in range(len(x)):
+    ax.text(x[i], y[i], f'Employee {i+1}', fontsize=16, ha='right')
+
+# Create legend for bubble sizes
+legend_labels = np.unique(np.round(sizes, decimals=-1))
+for label in legend_labels:
+    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
+
+legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
+ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
+ax.add_artist(legend1)
+
+# Convert the plot to an interactive HTML
+html_str = mpld3.fig_to_html(fig)
+
+# Save the HTML to a file
+with open("chart.html", "w") as f:
+    f.write(html_str)
+
+# Show the plot in a browser
+mpld3.show()
diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
new file mode 100644
index 0000000000..bfcdd78fd8
--- /dev/null
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -0,0 +1,53 @@
+from taipy.gui import Gui
+import matplotlib.pyplot as plt
+import numpy as np
+import mpld3
+
+from taipy.gui import Gui
+import matplotlib.pyplot as plt
+import numpy as np
+import mpld3
+
+# Define data
+employee_performance = [5, 4.8, 4.5, 4.2, 3.9, 3.7, 4.1, 4.6, 5.0, 4.3]
+happiness_scores = [5, 4.5, 4.2, 4.0, 3.8, 3.9, 4.3, 4.7, 4.9, 4.4]
+
+# Calculate sizes based on product of performance and happiness, scaled to 1-100%
+sizes = [e * h * 20 for e, h in zip(employee_performance, happiness_scores)]
+colors = sizes  # Color based on sizes
+
+# Create the Matplotlib figure
+fig, ax = plt.subplots(figsize=(12, 5.2))  # Adjust figsize for a slightly smaller chart
+scatter = ax.scatter(employee_performance, happiness_scores, s=sizes, c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
+ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
+ax.set_xlabel('Performance Score')
+ax.set_ylabel('Happiness Index')
+ax.set_title('Employee Performance vs. Happiness')
+
+# Example labels for bubbles
+for i in range(len(employee_performance)):
+    ax.text(employee_performance[i], happiness_scores[i], f'Emp {i+1}', fontsize=12, ha='right')
+
+# Scale sizes to percentages
+scaled_sizes = [size / max(sizes) * 100 for size in sizes]
+
+# Create legend with matching colors and percentage labels
+handles = [plt.Line2D([0], [0], marker='o', color='w', markerfacecolor=plt.cm.Greens(color / max(colors)), markersize=np.sqrt(size) / 1, label=f'{int(size)}%')
+           for color, size in zip(colors, scaled_sizes)]
+legend1 = ax.legend(handles=handles, title="Efficiency (%)", loc="center left", bbox_to_anchor=(1, 0.5), frameon=True, fontsize=10, labelspacing=2)
+ax.add_artist(legend1)
+
+# Convert the plot to an interactive HTML
+# html_str = mpld3.fig_to_html(fig)
+
+# Define Taipy page content
+page = """
+# Enhanced 2D Scatter Plot
+
+This page contains an enhanced 2D scatter plot created with Matplotlib:
+
+<|part|content={fig}|height="600px">
+"""
+
+if __name__ == "__main__":
+    Gui(page, css_file="styles.css").run(title="Chart Scatter Matplotlib")

From 8eaa8a2ca051d7dd028364c484510433496c45ae Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:55:45 -0400
Subject: [PATCH 11/34] Add an example on how to integrate Matplotlib

---
 .../charts/matplotlib/matplotlib_scatter.py         |  2 +-
 doc/gui/examples/charts/matplotlib/styles.css       | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index bfcdd78fd8..b20010b87d 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -46,7 +46,7 @@
 
 This page contains an enhanced 2D scatter plot created with Matplotlib:
 
-<|part|content={fig}|height="600px">
+<|part|content={fig}|>
 """
 
 if __name__ == "__main__":
diff --git a/doc/gui/examples/charts/matplotlib/styles.css b/doc/gui/examples/charts/matplotlib/styles.css
index d6e5161f60..65fecb5471 100644
--- a/doc/gui/examples/charts/matplotlib/styles.css
+++ b/doc/gui/examples/charts/matplotlib/styles.css
@@ -1,14 +1,11 @@
+img {
+    display: block;
+    margin: auto;
+}
+
 div.taipy-part.MuiBox-root {
     height: 560px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-
-img{
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-height: 100%;
-    max-width: 100%;
-}

From ff9c9485b801266c4112aceb63b5d2880077309e Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 19:02:36 -0400
Subject: [PATCH 12/34] update matplotlib scatter chart example

---
 .../charts/matplotlib/matplotlib_chart.py     | 47 -------------------
 .../charts/matplotlib/matplotlib_scatter.py   | 26 ++++++----
 2 files changed, 17 insertions(+), 56 deletions(-)
 delete mode 100644 doc/gui/examples/charts/matplotlib/matplotlib_chart.py

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_chart.py b/doc/gui/examples/charts/matplotlib/matplotlib_chart.py
deleted file mode 100644
index 75d5dd52d3..0000000000
--- a/doc/gui/examples/charts/matplotlib/matplotlib_chart.py
+++ /dev/null
@@ -1,47 +0,0 @@
-import matplotlib.pyplot as plt
-import numpy as np
-import mpld3
-
-plt.style.use('_mpl-gallery')
-
-# Make the data
-np.random.seed(3)
-x = np.random.uniform(1, 6, 10)  # Random x values within 1-6
-y = np.random.uniform(1, 6, 10)  # Random y values within 1-6
-
-# Size and color
-sizes = np.random.uniform(300, 600, len(x))  # Adjusted sizes for better fit
-colors = np.random.uniform(50, 100, len(x))  # Greenish colors
-
-# Plot
-fig, ax = plt.subplots(figsize=(10, 6))
-scatter = ax.scatter(x, y, s=sizes, c=colors, cmap="Greens", vmin=30, vmax=80)
-ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
-
-# Add axis labels
-ax.set_xlabel('Performance Score')
-ax.set_ylabel('Happiness Index')
-ax.set_title('Employee Performance vs. Happiness')
-
-# Example labels for bubbles
-for i in range(len(x)):
-    ax.text(x[i], y[i], f'Employee {i+1}', fontsize=16, ha='right')
-
-# Create legend for bubble sizes
-legend_labels = np.unique(np.round(sizes, decimals=-1))
-for label in legend_labels:
-    ax.scatter([], [], c='g', alpha=0.5, s=label, label=str(int(label)))
-
-legend1 = ax.legend(title="Bubble Size (Efficiency)", loc="upper right", frameon=True, fontsize=10)
-ax.legend(title="Bubble Size (Efficiency)", scatterpoints=1, labelspacing=1.5)
-ax.add_artist(legend1)
-
-# Convert the plot to an interactive HTML
-html_str = mpld3.fig_to_html(fig)
-
-# Save the HTML to a file
-with open("chart.html", "w") as f:
-    f.write(html_str)
-
-# Show the plot in a browser
-mpld3.show()
diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index b20010b87d..e35f1c8f3d 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -1,8 +1,19 @@
-from taipy.gui import Gui
-import matplotlib.pyplot as plt
-import numpy as np
-import mpld3
-
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+# Matplotlib scatter chart example
 from taipy.gui import Gui
 import matplotlib.pyplot as plt
 import numpy as np
@@ -37,9 +48,6 @@
 legend1 = ax.legend(handles=handles, title="Efficiency (%)", loc="center left", bbox_to_anchor=(1, 0.5), frameon=True, fontsize=10, labelspacing=2)
 ax.add_artist(legend1)
 
-# Convert the plot to an interactive HTML
-# html_str = mpld3.fig_to_html(fig)
-
 # Define Taipy page content
 page = """
 # Enhanced 2D Scatter Plot
@@ -50,4 +58,4 @@
 """
 
 if __name__ == "__main__":
-    Gui(page, css_file="styles.css").run(title="Chart Scatter Matplotlib")
+    Gui(page, css_file="styles.css").run(title="Chart-Scatter-Matplotlib")

From 366fb202f134d4dff8c6299c78c6dd5543fb9d6d Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 19:49:45 -0400
Subject: [PATCH 13/34] update matplotlib scatter example

---
 doc/gui/examples/charts/matplotlib/matplotlib_scatter.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index e35f1c8f3d..33ee239286 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -50,9 +50,13 @@
 
 # Define Taipy page content
 page = """
-# Enhanced 2D Scatter Plot
+<|toggle|theme|>
 
-This page contains an enhanced 2D scatter plot created with Matplotlib:
+<center style="color: var(--taipy-primary); font-size: 2.5em; font-weight:bold">
+  **Matplotlib**{: .color-primary} 2D Scatter Plot
+</center>
+This page contains an enhanced 2D scatter plot created with Matplotlib: 
+<br/><br/>
 
 <|part|content={fig}|>
 """

From 3bac8d7cc2f264ed97a6e56856f2bb0ecdd3b927 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Mon, 28 Oct 2024 19:56:01 -0400
Subject: [PATCH 14/34] update matplotlib scatter example

---
 doc/gui/examples/charts/matplotlib/matplotlib_scatter.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index 33ee239286..9e200e0150 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -55,7 +55,7 @@
 <center style="color: var(--taipy-primary); font-size: 2.5em; font-weight:bold">
   **Matplotlib**{: .color-primary} 2D Scatter Plot
 </center>
-This page contains an enhanced 2D scatter plot created with Matplotlib: 
+This page contains a 2D scatter plot created with Matplotlib: 
 <br/><br/>
 
 <|part|content={fig}|>

From 42f157dcca836e4f80fbd198cf225082b1158f02 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:36:26 -0400
Subject: [PATCH 15/34] udpate matplotlib example

---
 .../charts/matplotlib/matplotlib_scatter.py   | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index 9e200e0150..c980c4dacd 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -20,15 +20,15 @@
 import mpld3
 
 # Define data
-employee_performance = [5, 4.8, 4.5, 4.2, 3.9, 3.7, 4.1, 4.6, 5.0, 4.3]
-happiness_scores = [5, 4.5, 4.2, 4.0, 3.8, 3.9, 4.3, 4.7, 4.9, 4.4]
+employee_performance = [2, 3.5, 2, 3.5, 3, 4]
+happiness_scores = [2, 3, 4, 3, 2, 3]
 
 # Calculate sizes based on product of performance and happiness, scaled to 1-100%
 sizes = [e * h * 20 for e, h in zip(employee_performance, happiness_scores)]
 colors = sizes  # Color based on sizes
 
 # Create the Matplotlib figure
-fig, ax = plt.subplots(figsize=(12, 5.2))  # Adjust figsize for a slightly smaller chart
+fig, ax = plt.subplots(figsize=(10, 5.2))  # Adjust figsize for a slightly smaller chart
 scatter = ax.scatter(employee_performance, happiness_scores, s=sizes, c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
 ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
 ax.set_xlabel('Performance Score')
@@ -42,12 +42,27 @@
 # Scale sizes to percentages
 scaled_sizes = [size / max(sizes) * 100 for size in sizes]
 
-# Create legend with matching colors and percentage labels
-handles = [plt.Line2D([0], [0], marker='o', color='w', markerfacecolor=plt.cm.Greens(color / max(colors)), markersize=np.sqrt(size) / 1, label=f'{int(size)}%')
-           for color, size in zip(colors, scaled_sizes)]
-legend1 = ax.legend(handles=handles, title="Efficiency (%)", loc="center left", bbox_to_anchor=(1, 0.5), frameon=True, fontsize=10, labelspacing=2)
+# Create legend with employee labels and matching bubble colors and percentages
+scaled_sizes = [size / max(sizes) * 100 for size in sizes]
+handles = [
+    plt.Line2D(
+        [0], [0], marker='o', color='w', 
+        markerfacecolor=plt.cm.Greens(color / max(colors)), 
+        markersize=np.sqrt(size) / 1, 
+        label=f'Emp {i+1} ({int(size)}%)'
+    ) 
+    for i, (color, size) in enumerate(zip(colors, scaled_sizes))
+]
+legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)", loc="center left", bbox_to_anchor=(1, 0.5), frameon=True, fontsize=10, labelspacing=2)
+ax.add_artist(legend1)
+
+# Positioning the legend to avoid clipping
+legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)", loc="center right", bbox_to_anchor=(-0.2, 0.5), frameon=True, fontsize=10, labelspacing=2)
 ax.add_artist(legend1)
 
+# Adjust layout to ensure everything fits
+plt.tight_layout(rect=[0, 0, 0.75, 1])  # Adjust the rect parameter to leave space for the legend
+
 # Define Taipy page content
 page = """
 <|toggle|theme|>

From 64989334535b838ad8dd5d20e6cb65fa64943404 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:45:12 -0400
Subject: [PATCH 16/34] update matplotlib example

---
 doc/gui/examples/charts/matplotlib/matplotlib_scatter.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index c980c4dacd..3e07b5aab0 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -21,7 +21,7 @@
 
 # Define data
 employee_performance = [2, 3.5, 2, 3.5, 3, 4]
-happiness_scores = [2, 3, 4, 3, 2, 3]
+happiness_scores = [2, 3, 4, 5, 2, 3]
 
 # Calculate sizes based on product of performance and happiness, scaled to 1-100%
 sizes = [e * h * 20 for e, h in zip(employee_performance, happiness_scores)]

From 091b31298958cd1691a4ad88f7a57b6b834f0d98 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 30 Oct 2024 13:04:55 -0400
Subject: [PATCH 17/34] update matplotlib example

---
 doc/gui/examples/charts/matplotlib/matplotlib_scatter.py | 2 +-
 doc/gui/examples/charts/matplotlib/styles.css            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index 3e07b5aab0..69602609f9 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -77,4 +77,4 @@
 """
 
 if __name__ == "__main__":
-    Gui(page, css_file="styles.css").run(title="Chart-Scatter-Matplotlib")
+    Gui(page, css_file="styles.css").run(title="Chart-Scatter-Matplotlib")
\ No newline at end of file
diff --git a/doc/gui/examples/charts/matplotlib/styles.css b/doc/gui/examples/charts/matplotlib/styles.css
index 65fecb5471..b6ba97457d 100644
--- a/doc/gui/examples/charts/matplotlib/styles.css
+++ b/doc/gui/examples/charts/matplotlib/styles.css
@@ -8,4 +8,4 @@ div.taipy-part.MuiBox-root {
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}
\ No newline at end of file

From ed305c36ba1104a878818d9e2d57c4da6b4463d7 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:15:53 -0400
Subject: [PATCH 18/34] udate matplotlib_scatter

---
 doc/gui/examples/charts/matplotlib/styles.css | 11 -------
 .../{matplotlib => }/matplotlib_scatter.py    | 31 +++++++++++++------
 2 files changed, 21 insertions(+), 21 deletions(-)
 delete mode 100644 doc/gui/examples/charts/matplotlib/styles.css
 rename doc/gui/examples/charts/{matplotlib => }/matplotlib_scatter.py (85%)

diff --git a/doc/gui/examples/charts/matplotlib/styles.css b/doc/gui/examples/charts/matplotlib/styles.css
deleted file mode 100644
index b6ba97457d..0000000000
--- a/doc/gui/examples/charts/matplotlib/styles.css
+++ /dev/null
@@ -1,11 +0,0 @@
-img {
-    display: block;
-    margin: auto;
-}
-
-div.taipy-part.MuiBox-root {
-    height: 560px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
\ No newline at end of file
diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib_scatter.py
similarity index 85%
rename from doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
rename to doc/gui/examples/charts/matplotlib_scatter.py
index 69602609f9..f11c38cb92 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib_scatter.py
@@ -64,17 +64,28 @@
 plt.tight_layout(rect=[0, 0, 0.75, 1])  # Adjust the rect parameter to leave space for the legend
 
 # Define Taipy page content
-page = """
-<|toggle|theme|>
+page = Markdown(
+  """
+  <|toggle|theme|>
+  # **Matplotlib** 2D Scatter Plot
 
-<center style="color: var(--taipy-primary); font-size: 2.5em; font-weight:bold">
-  **Matplotlib**{: .color-primary} 2D Scatter Plot
-</center>
-This page contains a 2D scatter plot created with Matplotlib: 
-<br/><br/>
+  This page contains a 2D scatter plot created with Matplotlib: 
 
-<|part|content={fig}|>
-"""
+  <|part|class_name='scatter-plot'|content={fig}|>
+  """, 
+  style={
+      "img": {
+          "display": "block",
+          "margin": "auto"
+      },
+      ".scatter-plot": {
+          "height": "560px",
+          "display": "flex",
+          "align-items": "center",
+          "justify-content": "center"
+      }
+  }
+)
 
 if __name__ == "__main__":
-    Gui(page, css_file="styles.css").run(title="Chart-Scatter-Matplotlib")
\ No newline at end of file
+    Gui(page, style="style").run(title="Chart-Scatter-Matplotlib")
\ No newline at end of file

From 2658f9690eb5642909ad09d2268ad25f86dba675 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 30 Oct 2024 21:06:18 -0400
Subject: [PATCH 19/34] update matplotlib example for taipy 4.0.0

---
 .../{ => matplotlib}/matplotlib_scatter.py    | 45 +++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)
 rename doc/gui/examples/charts/{ => matplotlib}/matplotlib_scatter.py (81%)

diff --git a/doc/gui/examples/charts/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
similarity index 81%
rename from doc/gui/examples/charts/matplotlib_scatter.py
rename to doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index f11c38cb92..970cdaf3bb 100644
--- a/doc/gui/examples/charts/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -14,10 +14,11 @@
 #     python <script>
 # -----------------------------------------------------------------------------------------
 # Matplotlib scatter chart example
-from taipy.gui import Gui
+from taipy.gui import Gui, Markdown
 import matplotlib.pyplot as plt
 import numpy as np
 import mpld3
+import os
 
 # Define data
 employee_performance = [2, 3.5, 2, 3.5, 3, 4]
@@ -63,29 +64,27 @@
 # Adjust layout to ensure everything fits
 plt.tight_layout(rect=[0, 0, 0.75, 1])  # Adjust the rect parameter to leave space for the legend
 
-# Define Taipy page content
-page = Markdown(
-  """
-  <|toggle|theme|>
-  # **Matplotlib** 2D Scatter Plot
-
-  This page contains a 2D scatter plot created with Matplotlib: 
+# Save the figure as a PNG image
+output_dir = './images'
+if not os.path.exists(output_dir):
+    os.makedirs(output_dir)
+content = "./images/figure.png"
+plt.savefig(content)
 
-  <|part|class_name='scatter-plot'|content={fig}|>
-  """, 
-  style={
-      "img": {
-          "display": "block",
-          "margin": "auto"
-      },
-      ".scatter-plot": {
-          "height": "560px",
-          "display": "flex",
-          "align-items": "center",
-          "justify-content": "center"
-      }
-  }
+# Define Taipy page content
+page_content = Markdown("""
+# Matplotlib 2D Scatter Plot
+<|{content}|image|class_name=scatter-plot|>
+""",style={
+    ".scatter-plot": {
+        "display": "block",
+        "margin": "auto",
+        "max-width": "100% !important",  # Ensures the image does not overflow
+        "width": "1000px !important",   # Sets the width to the intrinsic size with higher priority
+        "height": "520px !important" 
+    }
+}
 )
 
 if __name__ == "__main__":
-    Gui(page, style="style").run(title="Chart-Scatter-Matplotlib")
\ No newline at end of file
+    Gui(page_content).run(title="Chart-Scatter-Matplotlib")
\ No newline at end of file

From be9752707b84dc8ac4e316164b0d7b3eabd6a340 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 30 Oct 2024 21:08:40 -0400
Subject: [PATCH 20/34] update matplotlib example

---
 doc/gui/examples/charts/matplotlib/matplotlib_scatter.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
index 970cdaf3bb..ad4825c44a 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
@@ -17,7 +17,6 @@
 from taipy.gui import Gui, Markdown
 import matplotlib.pyplot as plt
 import numpy as np
-import mpld3
 import os
 
 # Define data

From 5777d5c92e0f84f55a34c584fa0ddbd04cce89ca Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 08:12:55 -0400
Subject: [PATCH 21/34] update matplotlib example

---
 .../{matplotlib_scatter.py => matplotlib_image.py}        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
 rename doc/gui/examples/charts/matplotlib/{matplotlib_scatter.py => matplotlib_image.py} (91%)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
similarity index 91%
rename from doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
rename to doc/gui/examples/charts/matplotlib/matplotlib_image.py
index ad4825c44a..23c23b8234 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_scatter.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -61,7 +61,7 @@
 ax.add_artist(legend1)
 
 # Adjust layout to ensure everything fits
-plt.tight_layout(rect=[0, 0, 0.75, 1])  # Adjust the rect parameter to leave space for the legend
+plt.tight_layout(rect=[0, 0, 0.75, 1])
 
 # Save the figure as a PNG image
 output_dir = './images'
@@ -78,12 +78,12 @@
     ".scatter-plot": {
         "display": "block",
         "margin": "auto",
-        "max-width": "100% !important",  # Ensures the image does not overflow
-        "width": "1000px !important",   # Sets the width to the intrinsic size with higher priority
+        "max-width": "100% !important",
+        "width": "1000px !important",
         "height": "520px !important" 
     }
 }
 )
 
 if __name__ == "__main__":
-    Gui(page_content).run(title="Chart-Scatter-Matplotlib")
\ No newline at end of file
+    Gui(page_content).run(title="Chart-Scatter-Matplotlib")

From 9f46838507adf319e13515efb357d1ee8b03032b Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 08:29:15 -0400
Subject: [PATCH 22/34] update matplotlib example

---
 .../examples/charts/matplotlib/matplotlib_image.py  | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index 23c23b8234..bedb130cd0 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -63,24 +63,15 @@
 # Adjust layout to ensure everything fits
 plt.tight_layout(rect=[0, 0, 0.75, 1])
 
-# Save the figure as a PNG image
-output_dir = './images'
-if not os.path.exists(output_dir):
-    os.makedirs(output_dir)
-content = "./images/figure.png"
-plt.savefig(content)
-
 # Define Taipy page content
 page_content = Markdown("""
 # Matplotlib 2D Scatter Plot
-<|{content}|image|class_name=scatter-plot|>
+<|part|content={fig}|class_name=scatter-plot|>
 """,style={
     ".scatter-plot": {
         "display": "block",
         "margin": "auto",
-        "max-width": "100% !important",
-        "width": "1000px !important",
-        "height": "520px !important" 
+        "height": "560px"
     }
 }
 )

From b4cccf2267f18a78eed4411b690a26a19d16718c Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 08:57:27 -0400
Subject: [PATCH 23/34] update matplotlib example

---
 .../charts/matplotlib/matplotlib_image.py     | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index bedb130cd0..f0d75d46a5 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -29,7 +29,8 @@
 
 # Create the Matplotlib figure
 fig, ax = plt.subplots(figsize=(10, 5.2))  # Adjust figsize for a slightly smaller chart
-scatter = ax.scatter(employee_performance, happiness_scores, s=sizes, c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
+scatter = ax.scatter(employee_performance, happiness_scores, s=sizes,
+                     c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
 ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
 ax.set_xlabel('Performance Score')
 ax.set_ylabel('Happiness Index')
@@ -47,17 +48,19 @@
 handles = [
     plt.Line2D(
         [0], [0], marker='o', color='w', 
-        markerfacecolor=plt.cm.Greens(color / max(colors)), 
-        markersize=np.sqrt(size) / 1, 
+        markerfacecolor=plt.cm.Greens(color / max(colors)),
+        markersize=np.sqrt(size) / 1,
         label=f'Emp {i+1} ({int(size)}%)'
-    ) 
+    )
     for i, (color, size) in enumerate(zip(colors, scaled_sizes))
 ]
-legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)", loc="center left", bbox_to_anchor=(1, 0.5), frameon=True, fontsize=10, labelspacing=2)
+legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)",
+                     loc="center left", bbox_to_anchor=(1, 0.5), frameon=True, fontsize=10, labelspacing=2)
 ax.add_artist(legend1)
 
 # Positioning the legend to avoid clipping
-legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)", loc="center right", bbox_to_anchor=(-0.2, 0.5), frameon=True, fontsize=10, labelspacing=2)
+legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)",
+                     loc="center right", bbox_to_anchor=(-0.2, 0.5), frameon=True, fontsize=10, labelspacing=2)
 ax.add_artist(legend1)
 
 # Adjust layout to ensure everything fits
@@ -65,16 +68,19 @@
 
 # Define Taipy page content
 page_content = Markdown("""
-# Matplotlib 2D Scatter Plot
-<|part|content={fig}|class_name=scatter-plot|>
-""",style={
+    # Matplotlib 2D Scatter Plot
+    <|part|content={fig}|class_name=scatter-plot|>
+    """,style={
+    ".img": {
+        "display": "block",
+        "margin": "auto",
+    }
     ".scatter-plot": {
         "display": "block",
         "margin": "auto",
-        "height": "560px"
+        "height": "560px",
     }
-}
-)
+})
 
 if __name__ == "__main__":
     Gui(page_content).run(title="Chart-Scatter-Matplotlib")

From 062d3a9559cccad9dc8838763ae168dbe31af67a Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 09:01:29 -0400
Subject: [PATCH 24/34] update matplotlib example

---
 doc/gui/examples/charts/matplotlib/matplotlib_image.py | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index f0d75d46a5..05b3268d00 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -71,10 +71,6 @@
     # Matplotlib 2D Scatter Plot
     <|part|content={fig}|class_name=scatter-plot|>
     """,style={
-    ".img": {
-        "display": "block",
-        "margin": "auto",
-    }
     ".scatter-plot": {
         "display": "block",
         "margin": "auto",

From dfc264c7143015397f65a4e385fd5a9b1b385041 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 10:10:05 -0400
Subject: [PATCH 25/34] remove import os

---
 doc/gui/examples/charts/matplotlib/matplotlib_image.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index 05b3268d00..275bec1bb6 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -17,7 +17,6 @@
 from taipy.gui import Gui, Markdown
 import matplotlib.pyplot as plt
 import numpy as np
-import os
 
 # Define data
 employee_performance = [2, 3.5, 2, 3.5, 3, 4]

From 97b2852379dcff35b7ffe0778f894488a7ff5e93 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 11:18:39 -0400
Subject: [PATCH 26/34] update matplotlib image example

---
 .../charts/matplotlib/matplotlib_image.py      | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index 275bec1bb6..0d990c94d2 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -17,6 +17,7 @@
 from taipy.gui import Gui, Markdown
 import matplotlib.pyplot as plt
 import numpy as np
+import os
 
 # Define data
 employee_performance = [2, 3.5, 2, 3.5, 3, 4]
@@ -65,15 +66,24 @@
 # Adjust layout to ensure everything fits
 plt.tight_layout(rect=[0, 0, 0.75, 1])
 
+# Save the figure as a PNG image
+output_dir = './images'
+if not os.path.exists(output_dir):
+    os.makedirs(output_dir)
+content = "./images/figure.png"
+plt.savefig(content)
+
 # Define Taipy page content
 page_content = Markdown("""
-    # Matplotlib 2D Scatter Plot
-    <|part|content={fig}|class_name=scatter-plot|>
-    """,style={
+# Matplotlib 2D Scatter Plot
+<|{content}|image|class_name=scatter-plot|>
+""",style={
     ".scatter-plot": {
         "display": "block",
         "margin": "auto",
-        "height": "560px",
+        "max-width": "100% !important",
+        "width": "1000px !important",
+        "height": "520px !important" 
     }
 })
 

From 1de58e767735367979a1cb8f589602c901963b75 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:31:26 -0400
Subject: [PATCH 27/34] update matplotlib_image, rename markdown_example

---
 .../{markdown.py => markdown_example.py}      |  0
 .../charts/matplotlib/matplotlib_image.py     | 74 +++++++++----------
 2 files changed, 33 insertions(+), 41 deletions(-)
 rename doc/gui/examples/charts/matplotlib/{markdown.py => markdown_example.py} (100%)

diff --git a/doc/gui/examples/charts/matplotlib/markdown.py b/doc/gui/examples/charts/matplotlib/markdown_example.py
similarity index 100%
rename from doc/gui/examples/charts/matplotlib/markdown.py
rename to doc/gui/examples/charts/matplotlib/markdown_example.py
diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index 0d990c94d2..f09c248da5 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -16,55 +16,47 @@
 # Matplotlib scatter chart example
 from taipy.gui import Gui, Markdown
 import matplotlib.pyplot as plt
-import numpy as np
 import os
 
-# Define data
-employee_performance = [2, 3.5, 2, 3.5, 3, 4]
-happiness_scores = [2, 3, 4, 5, 2, 3]
+# Generate a scatter plot
+x = [1, 2, 3, 4, 5]  # x axis values
+y = [10, 14, 12, 15, 18]  # y axis values
+sizes = [100, 100, 100, 100, 100]  # Bubble sizes
+colors = [30, 40, 50, 60, 70]  # Bubble color values that will be mapped to shades of colormap (cmap)
 
-# Calculate sizes based on product of performance and happiness, scaled to 1-100%
-sizes = [e * h * 20 for e, h in zip(employee_performance, happiness_scores)]
-colors = sizes  # Color based on sizes
+# Scatter plot
+# The `c` parameter uses the `colors` list to map values to the colormap (cmap)
+# The `edgecolors` parameter sets the color of the edges around the bubbles
+plt.scatter(x, y, s=sizes, c=colors, cmap='Greens', edgecolors='black', linewidths=1) # scatter plot
+plt.xlabel('X-axis')
+plt.ylabel('Y-axis')
+plt.title('Matplotlib 2D Scatter Plot')
 
-# Create the Matplotlib figure
-fig, ax = plt.subplots(figsize=(10, 5.2))  # Adjust figsize for a slightly smaller chart
-scatter = ax.scatter(employee_performance, happiness_scores, s=sizes,
-                     c=colors, cmap="Greens", vmin=min(colors), vmax=max(colors))
-ax.set(xlim=(1, 6), xticks=np.arange(1, 7), ylim=(1, 6), yticks=np.arange(1, 7))
-ax.set_xlabel('Performance Score')
-ax.set_ylabel('Happiness Index')
-ax.set_title('Employee Performance vs. Happiness')
+# Adding labels next to each point
+for i in range(len(x)):
+    plt.text(x[i] + 0.1, y[i] - 0.1, f'Point {i+1}', fontsize=9, ha='left')
 
-# Example labels for bubbles
-for i in range(len(employee_performance)):
-    ax.text(employee_performance[i], happiness_scores[i], f'Emp {i+1}', fontsize=12, ha='right')
-
-# Scale sizes to percentages
-scaled_sizes = [size / max(sizes) * 100 for size in sizes]
-
-# Create legend with employee labels and matching bubble colors and percentages
-scaled_sizes = [size / max(sizes) * 100 for size in sizes]
+# Creating legend entries for each point
+# Each entry corresponds to a point, with the color and label indicating the point's position.
+# The `markerfacecolor` sets the fill color of the legend marker to match the point's color in the 'Greens' colormap.
+# The `markeredgecolor` sets the edge color of the legend marker.
+# The `markeredgewidth` sets the width of the edge.
 handles = [
     plt.Line2D(
-        [0], [0], marker='o', color='w', 
+        [0], [0], marker='o', color='w',
         markerfacecolor=plt.cm.Greens(color / max(colors)),
-        markersize=np.sqrt(size) / 1,
-        label=f'Emp {i+1} ({int(size)}%)'
-    )
-    for i, (color, size) in enumerate(zip(colors, scaled_sizes))
+        markersize=10,  # Adjust the size for visibility
+        label=f'Point {i+1}',
+        markeredgewidth=1,  # Thickness of the edge color
+        markeredgecolor='black'  # Edge color to match the plot
+    ) for i, color in enumerate(colors)
 ]
-legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)",
-                     loc="center left", bbox_to_anchor=(1, 0.5), frameon=True, fontsize=10, labelspacing=2)
-ax.add_artist(legend1)
 
-# Positioning the legend to avoid clipping
-legend1 = ax.legend(handles=handles, title="Employees and Efficiency (%)",
-                     loc="center right", bbox_to_anchor=(-0.2, 0.5), frameon=True, fontsize=10, labelspacing=2)
-ax.add_artist(legend1)
+# Placing the legend on the left side of the chart
+plt.legend(handles=handles, title="Points", loc="center left", bbox_to_anchor=(1, 0.5), frameon=True)
 
-# Adjust layout to ensure everything fits
-plt.tight_layout(rect=[0, 0, 0.75, 1])
+# Adjust the layout to ensure everything fits and nothing is clipped
+plt.tight_layout(rect=[0, 0, 1, 1])
 
 # Save the figure as a PNG image
 output_dir = './images'
@@ -77,13 +69,13 @@
 page_content = Markdown("""
 # Matplotlib 2D Scatter Plot
 <|{content}|image|class_name=scatter-plot|>
-""",style={
+""", style={
     ".scatter-plot": {
         "display": "block",
         "margin": "auto",
         "max-width": "100% !important",
-        "width": "1000px !important",
-        "height": "520px !important" 
+        "width": "max-content !important",
+        "height": "max-content !important"
     }
 })
 

From 8d38f3f7e6dd547ee136c94abcf6442bb6fb1264 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:39:10 -0400
Subject: [PATCH 28/34] update matplotlib_image

---
 doc/gui/examples/charts/matplotlib/matplotlib_image.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index f09c248da5..ce06c2d28a 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -27,7 +27,7 @@
 # Scatter plot
 # The `c` parameter uses the `colors` list to map values to the colormap (cmap)
 # The `edgecolors` parameter sets the color of the edges around the bubbles
-plt.scatter(x, y, s=sizes, c=colors, cmap='Greens', edgecolors='black', linewidths=1) # scatter plot
+plt.scatter(x, y, s=sizes, c=colors, cmap='Greens', edgecolors='black', linewidths=1)
 plt.xlabel('X-axis')
 plt.ylabel('Y-axis')
 plt.title('Matplotlib 2D Scatter Plot')

From 986d137b8c4a14f797520cf8c7457bee606e74b6 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:46:47 -0400
Subject: [PATCH 29/34] update matplotlib_image: sort imports

---
 doc/gui/examples/charts/matplotlib/matplotlib_image.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index ce06c2d28a..dfdf345e25 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -14,9 +14,9 @@
 #     python <script>
 # -----------------------------------------------------------------------------------------
 # Matplotlib scatter chart example
-from taipy.gui import Gui, Markdown
-import matplotlib.pyplot as plt
 import os
+import matplotlib.pyplot as plt
+from taipy.gui import Gui, Markdown
 
 # Generate a scatter plot
 x = [1, 2, 3, 4, 5]  # x axis values

From d4360f2e293160ec147c9d4c0234f7aea94ff999 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Sat, 2 Nov 2024 09:18:32 -0400
Subject: [PATCH 30/34] Fix import order in matplotlib_image.py

---
 doc/gui/examples/charts/matplotlib/matplotlib_image.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
index dfdf345e25..ee69d0ad14 100644
--- a/doc/gui/examples/charts/matplotlib/matplotlib_image.py
+++ b/doc/gui/examples/charts/matplotlib/matplotlib_image.py
@@ -13,11 +13,13 @@
 # Python environment and run:
 #     python <script>
 # -----------------------------------------------------------------------------------------
-# Matplotlib scatter chart example
 import os
+
 import matplotlib.pyplot as plt
+
 from taipy.gui import Gui, Markdown
 
+
 # Generate a scatter plot
 x = [1, 2, 3, 4, 5]  # x axis values
 y = [10, 14, 12, 15, 18]  # y axis values

From 3bfa5bdb9d3cceaa364997240c5ca5ae3769d724 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:38:18 -0500
Subject: [PATCH 31/34] rename to image.py

---
 .../examples/charts/matplotlib/{matplotlib_image.py => image.py}  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename doc/gui/examples/charts/matplotlib/{matplotlib_image.py => image.py} (100%)

diff --git a/doc/gui/examples/charts/matplotlib/matplotlib_image.py b/doc/gui/examples/charts/matplotlib/image.py
similarity index 100%
rename from doc/gui/examples/charts/matplotlib/matplotlib_image.py
rename to doc/gui/examples/charts/matplotlib/image.py

From 13fd293c07f258c4d9b7cc1b068e267743ecf146 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:41:49 -0500
Subject: [PATCH 32/34] fix linter sort imports

---
 doc/gui/examples/charts/matplotlib/image.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/image.py b/doc/gui/examples/charts/matplotlib/image.py
index ee69d0ad14..946892bfe2 100644
--- a/doc/gui/examples/charts/matplotlib/image.py
+++ b/doc/gui/examples/charts/matplotlib/image.py
@@ -16,7 +16,6 @@
 import os
 
 import matplotlib.pyplot as plt
-
 from taipy.gui import Gui, Markdown
 
 

From 33c18cbe070403a2d2f7bab300580fe29e26417b Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:42:48 -0500
Subject: [PATCH 33/34] rename back to markdown.py

---
 .../charts/matplotlib/{markdown_example.py => markdown.py}        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename doc/gui/examples/charts/matplotlib/{markdown_example.py => markdown.py} (100%)

diff --git a/doc/gui/examples/charts/matplotlib/markdown_example.py b/doc/gui/examples/charts/matplotlib/markdown.py
similarity index 100%
rename from doc/gui/examples/charts/matplotlib/markdown_example.py
rename to doc/gui/examples/charts/matplotlib/markdown.py

From c23a13508d260edad36978c23f5f30a1eda8fe92 Mon Sep 17 00:00:00 2001
From: abisoyeonanuga <102636953+dottymatrix@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:01:09 -0500
Subject: [PATCH 34/34] remove one line

---
 doc/gui/examples/charts/matplotlib/image.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/doc/gui/examples/charts/matplotlib/image.py b/doc/gui/examples/charts/matplotlib/image.py
index 946892bfe2..63aa977553 100644
--- a/doc/gui/examples/charts/matplotlib/image.py
+++ b/doc/gui/examples/charts/matplotlib/image.py
@@ -18,7 +18,6 @@
 import matplotlib.pyplot as plt
 from taipy.gui import Gui, Markdown
 
-
 # Generate a scatter plot
 x = [1, 2, 3, 4, 5]  # x axis values
 y = [10, 14, 12, 15, 18]  # y axis values