From d11390ac10f49d1cf006dc302324c37a2acb116c Mon Sep 17 00:00:00 2001
From: Ophir LOJKINE <contact@ophir.dev>
Date: Tue, 7 Apr 2026 17:18:13 +0200
Subject: [PATCH] Chart: add `show_legend` toggle, document it, and add e2e
 test (#1270)

* Add show_legend option to chart component

* Fix show_legend for SQLite boolean values

* remove ai cruft
---
 .../sqlpage/migrations/01_documentation.sql           |  3 ++-
 sqlpage/apexcharts.js                                 |  3 +++
 sqlpage/templates/chart.handlebars                    |  1 +
 tests/end-to-end/official-site.spec.ts                | 11 +++++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index a5f3bde3..ddac5786 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 a0f46367..7e71ea8f 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 667e5eae..34d3256e 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 eda20e7e..8b2c6b3f 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();