diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index a5f3bde38..ddac5786f 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -657,6 +657,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('color', 'The name of a color in which to display the chart. If there are multiple series in the chart, this parameter can be repeated multiple times.', 'COLOR', TRUE, TRUE),
     ('stacked', 'Whether to cumulate values from different series.', 'BOOLEAN', TRUE, TRUE),
     ('toolbar', 'Whether to display a toolbar at the top right of the chart, that offers downloading the data as CSV.', 'BOOLEAN', TRUE, TRUE),
+    ('show_legend', 'Whether to display the legend listing all chart series. Defaults to true.', 'BOOLEAN', TRUE, TRUE),
     ('logarithmic', 'Display the y-axis in logarithmic scale.', 'BOOLEAN', TRUE, TRUE),
     ('horizontal', 'Displays a bar chart with horizontal bars instead of vertical ones.', 'BOOLEAN', TRUE, TRUE),
     ('height', 'Height of the chart, in pixels. By default: 250', 'INTEGER', TRUE, TRUE),
@@ -702,7 +703,7 @@ INSERT INTO example(component, description, properties) VALUES
         {"series": "Asia", "label": "China", "value": 20},
         {"series": "Asia", "label": "Japan", "value": 10}
     ]')),
-    ('chart', 'A bar chart with multiple series.', json('[{"component":"chart", "title": "Expenses", "type": "bar", "stacked": true, "toolbar": true, "ystep": 10}, '||
+    ('chart', 'A bar chart with multiple series.', json('[{"component":"chart", "title": "Expenses", "type": "bar", "stacked": true, "toolbar": true, "show_legend": false, "ystep": 10}, '||
     '{"series": "Marketing", "x": 2021, "value": 35}, '||
     '{"series": "Marketing", "x": 2022, "value": 15}, '||
     '{"series": "Human resources", "x": 2021, "value": 30}, '||
diff --git a/sqlpage/apexcharts.js b/sqlpage/apexcharts.js
index a0f46367b..7e71ea8f3 100644
--- a/sqlpage/apexcharts.js
+++ b/sqlpage/apexcharts.js
@@ -155,6 +155,9 @@ sqlpage_chart = (() => {
       theme: {
         palette: "palette4",
       },
+      legend: {
+        show: data.show_legend === null || !!data.show_legend,
+      },
       dataLabels: {
         enabled: !!data.labels,
         dropShadow: {
diff --git a/sqlpage/templates/chart.handlebars b/sqlpage/templates/chart.handlebars
index 667e5eae8..34d3256e8 100644
--- a/sqlpage/templates/chart.handlebars
+++ b/sqlpage/templates/chart.handlebars
@@ -31,6 +31,7 @@
     "xmax": {{stringify xmax}},
     "ymax": {{stringify ymax}},
     "toolbar": {{stringify toolbar}},
+    "show_legend": {{stringify show_legend}},
     "logarithmic": {{stringify logarithmic}},
     "horizontal": {{stringify horizontal}},
     "stacked": {{stringify stacked}},
diff --git a/tests/end-to-end/official-site.spec.ts b/tests/end-to-end/official-site.spec.ts
index eda20e7e0..8b2c6b3fd 100644
--- a/tests/end-to-end/official-site.spec.ts
+++ b/tests/end-to-end/official-site.spec.ts
@@ -24,6 +24,17 @@ test("chart", async ({ page }) => {
   await expect(page.locator(".apexcharts-canvas").first()).toBeVisible();
 });
 
+test("chart supports hiding legend", async ({ page }) => {
+  await page.goto(`${BASE}/documentation.sql?component=chart#component`);
+
+  const expensesChart = page.locator(".card", {
+    has: page.getByRole("heading", { name: "Expenses" }),
+  });
+
+  await expect(expensesChart.locator(".apexcharts-canvas")).toBeVisible();
+  await expect(expensesChart.locator(".apexcharts-legend")).toBeHidden();
+});
+
 test("map", async ({ page }) => {
   await page.goto(`${BASE}/documentation.sql?component=map#component`);
   await expect(page.getByText("Loading...")).not.toBeVisible();