Colors

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx

@@ -142,7 +142,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
 
         const flagTypeDatasets = Array.from(allFlagTypes).map(
             (flagType, index) => ({
-                label: `Created: ${flagType}`,
+                label: flagType,
                 data: weeks,
                 backgroundColor: flagTypeColors[index % flagTypeColors.length],
                 borderColor: flagTypeColors[index % flagTypeColors.length],
@@ -157,6 +157,8 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
             }),
         );
 
+        const flagTypeNames = Array.from(allFlagTypes);
+
         return {
             datasets: [
                 {
@@ -164,10 +166,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                     data: weeks,
                     backgroundColor: theme.palette.background.application,
                     borderColor: theme.palette.background.application,
-                    type: 'bar' as const,
                     parsing: { yAxisKey: 'archivedFlags', xAxisKey: 'date' },
-                    yAxisID: 'y',
-                    stack: 'archived',
                     order: 2,
                 },
                 ...flagTypeDatasets,
@@ -176,7 +175,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                     data: weeks,
                     borderColor: theme.palette.primary.light,
                     backgroundColor: theme.palette.primary.light,
-                    fill: false,
                     type: 'line' as const,
                     parsing: {
                         yAxisKey: 'archivePercentage',
@@ -186,6 +184,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                     order: 1,
                 },
             ],
+            flagTypeNames, // Add this to the return object
         };
     }, [creationArchiveData, theme]);
 
@@ -201,6 +200,11 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
     const data =
         notEnoughData || isLoading ? placeholderData : aggregateOrProjectData;
 
+    // Get flag type names for legend filtering
+    const flagTypeNames = isAggregate
+        ? (aggregateHealthData as any).flagTypeNames || []
+        : [];
+
     return (
         <>
             <Chart
@@ -214,9 +218,8 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                             position: 'bottom' as const,
                             labels: {
                                 filter: (legendItem) => {
-                                    // Hide individual created flag type labels
+                                    return !flagTypeNames.includes(
-                                    return !legendItem.text?.startsWith(
+                                        legendItem.text || '',
-                                        'Created:',
                                     );
                                 },
                                 generateLabels: (chart) => {
@@ -226,7 +229,9 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                                         );
                                     const filtered = original.filter(
                                         (item) =>
-                                            !item.text?.startsWith('Created:'),
+                                            !flagTypeNames.includes(
+                                                item.text || '',
+                                            ),
                                     );
 
                                     // Add custom "Created Flags" legend item
@@ -294,8 +299,10 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                 height={100}
                 width={250}
             />
-            {tooltip?.dataPoints?.some((point) =>
+            {tooltip?.dataPoints?.some(
-                point.dataset.label?.startsWith('Created:'),
+                (point) =>
+                    point.dataset.label !== 'Archived flags' &&
+                    point.dataset.label !== 'Flags archived / Flags created',
             ) ? (
                 <CreationArchiveTooltip tooltip={tooltip} />
             ) : tooltip?.dataPoints?.some(

frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx

@@ -28,30 +28,29 @@ export const CreationArchiveTooltip: FC<CreationArchiveTooltipProps> = ({
         return null;
     }
 
-    // Filter for created flag type datasets only
+    // Filter for flag type datasets (exclude archived flags and percentage line)
-    const createdFlagDataPoints = tooltip.dataPoints.filter((point) =>
+    const createdFlagDataPoints = tooltip.dataPoints.filter(
-        point.dataset.label?.startsWith('Created:'),
+        (point) =>
+            point.dataset.label !== 'Archived flags' &&
+            point.dataset.label !== 'Flags archived / Flags created',
     );
 
     if (createdFlagDataPoints.length === 0) {
         return null;
     }
 
-    // Get the data from the first point (they all have the same raw data)
     const rawData = createdFlagDataPoints[0]?.raw as any;
 
     if (!rawData?.createdFlagsByType) {
         return null;
     }
 
-    // Get flag type names from the chart datasets
     const flagTypeNames = createdFlagDataPoints.map(
-        (point) => point.dataset.label?.replace('Created: ', '') || '',
+        (point) => point.dataset.label || '',
     );
 
     const flagTypeColors = getFlagTypeColors(theme);
 
-    // Create entries for each flag type with count > 0
     const flagTypeEntries = Object.entries(rawData.createdFlagsByType)
         .filter(([, count]) => (count as number) > 0)
         .map(([flagType, count], index) => ({