feat(charts): allow configuring the internal Legend component

Author: Lukas742

cypress/support/utils.tsx

@@ -84,3 +84,19 @@ export function testChartZoomingTool(Component, props) {
     cy.get('.recharts-brush [stroke="red"]').should('be.visible');
   });
 }
+
+export function testChartLegendConfig(Component, props) {
+  it('legendConfig', () => {
+    cy.mount(
+      <Component
+        {...props}
+        chartConfig={{
+          legendConfig: {
+            formatter: (value) => <span data-testid="catval">{value}🐱</span>
+          }
+        }}
+      />
+    );
+    cy.findAllByTestId('catval').should('be.visible');
+  });
+}

packages/charts/src/components/BarChart/BarChart.cy.tsx

@@ -1,6 +1,6 @@
 import { complexDataSet } from '../../resources/DemoProps.js';
 import { BarChart } from './BarChart.js';
-import { cypressPassThroughTestsFactory, testChartZoomingTool } from '@/cypress/support/utils';
+import { cypressPassThroughTestsFactory, testChartLegendConfig, testChartZoomingTool } from '@/cypress/support/utils';
 
 const dimensions = [
   {
@@ -88,6 +88,8 @@ describe('BarChart', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  testChartLegendConfig(BarChart, { dataset: complexDataSet, dimensions, measures });
+
   testChartZoomingTool(BarChart, { dataset: complexDataSet, dimensions, measures });
 
   cypressPassThroughTestsFactory(BarChart, { dimensions: [], measures: [] });