Update demos according to feedback

Author: bernardobelchior

docs/data/charts/legend/LegendCustomLabelMark.js

@@ -17,12 +17,12 @@ export default function LegendCustomLabelMark() {
   return (
     <BarChart
       series={[
-        { id: 0, data: [10], label: 'Series A', labelMarkType: HTMLCircle },
-        { id: 1, data: [15], label: 'Series B', labelMarkType: 'line' },
-        { id: 2, data: [20], label: 'Series C' },
-        { id: 3, data: [10], label: 'Series D', labelMarkType: SVGDiamond },
+        { id: 0, data: [10, 15], label: 'Series A', labelMarkType: HTMLCircle },
+        { id: 1, data: [15, 20], label: 'Series B', labelMarkType: 'line' },
+        { id: 2, data: [20, 25], label: 'Series C' },
+        { id: 3, data: [10, 15], label: 'Series D', labelMarkType: SVGDiamond },
       ]}
-      xAxis={[{ scaleType: 'band', data: ['Category'] }]}
+      xAxis={[{ scaleType: 'band', data: ['Category 1', 'Category 2'] }]}
       height={200}
     />
   );

docs/data/charts/legend/LegendCustomLabelMark.tsx

@@ -18,12 +18,12 @@ export default function LegendCustomLabelMark() {
   return (
     <BarChart
       series={[
-        { id: 0, data: [10], label: 'Series A', labelMarkType: HTMLCircle },
-        { id: 1, data: [15], label: 'Series B', labelMarkType: 'line' },
-        { id: 2, data: [20], label: 'Series C' },
-        { id: 3, data: [10], label: 'Series D', labelMarkType: SVGDiamond },
+        { id: 0, data: [10, 15], label: 'Series A', labelMarkType: HTMLCircle },
+        { id: 1, data: [15, 20], label: 'Series B', labelMarkType: 'line' },
+        { id: 2, data: [20, 25], label: 'Series C' },
+        { id: 3, data: [10, 15], label: 'Series D', labelMarkType: SVGDiamond },
       ]}
-      xAxis={[{ scaleType: 'band', data: ['Category'] }]}
+      xAxis={[{ scaleType: 'band', data: ['Category 1', 'Category 2'] }]}
       height={200}
     />
   );

docs/data/charts/legend/LegendCustomLabelMark.tsx.preview

@@ -1,10 +1,10 @@
 <BarChart
   series={[
-    { id: 0, data: [10], label: 'Series A', labelMarkType: HTMLCircle },
-    { id: 1, data: [15], label: 'Series B', labelMarkType: 'line' },
-    { id: 2, data: [20], label: 'Series C' },
-    { id: 3, data: [10], label: 'Series D', labelMarkType: SVGDiamond },
+    { id: 0, data: [10, 15], label: 'Series A', labelMarkType: HTMLCircle },
+    { id: 1, data: [15, 20], label: 'Series B', labelMarkType: 'line' },
+    { id: 2, data: [20, 25], label: 'Series C' },
+    { id: 3, data: [10, 15], label: 'Series D', labelMarkType: SVGDiamond },
   ]}
-  xAxis={[{ scaleType: 'band', data: ['Category'] }]}
+  xAxis={[{ scaleType: 'band', data: ['Category 1', 'Category 2'] }]}
   height={200}
 />

docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.js

@@ -22,7 +22,7 @@ function SVGStar({ color, ...props }) {
   );
 }
 
-export default function PieChartWithCustomLegendTooltip() {
+export default function PieChartWithCustomLegendAndTooltip() {
   return (
     <PieChart
       series={[

docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.tsx

@@ -23,7 +23,7 @@ function SVGStar({ color, ...props }: ChartsLabelCustomMarkProps) {
   );
 }
 
-export default function PieChartWithCustomLegendTooltip() {
+export default function PieChartWithCustomLegendAndTooltip() {
   return (
     <PieChart
       series={[