custom legend

src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx

@@ -61,6 +61,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
   const [chartProjectBudgetedHour, setChartProjectBudgetedHour]:any[] = useState([]);
   const [chartProjectSpentHour, setChartProjectSpentHour]:any[] = useState([]);
   const [chartManhourConsumptionPercentage, setChartManhourConsumptionPercentage]:any[] = useState([]);
+  const [chartTeam, setChartTeam]:any[] = useState([]);
   const color = ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b",
   "#f58a9b", "#8ef4d1", "#92caf9", "#a798f9", "#fad287",
   "#f595a6", "#88f1cc", "#9dcff5", "#a39bf5", "#f8de83",
@@ -133,6 +134,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
     const projectSpentManHour = []
     const manhourConsumptionPercentage = []
     const chartColor = []
+    const chartTeam = []
     let c = 0
    for (let i = 0; i < teamProjectResult.length; i++){
     
@@ -144,10 +146,12 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
     manhourConsumptionPercentage.push(teamProjectResult[i].manhourConsumptionPercentage)
     if (i === 0) {
       chartColor.push(color[c])
+      chartTeam.push('Team '+teamProjectResult[i].team)
       teamProjectResult[i].color = color[c]
     } else if (teamProjectResult[i].team !== teamProjectResult[i - 1].team) {
       c = c + 1
       chartColor.push(color[c])
+      chartTeam.push('Team '+teamProjectResult[i].team)
       teamProjectResult[i].color = color[c]
     } else if (teamProjectResult[i].team === teamProjectResult[i - 1].team){
       chartColor.push(color[c])
@@ -160,6 +164,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
    setChartProjectBudgetedHour(projectBudgetedManHour)
    setChartProjectSpentHour(projectSpentManHour)
    setChartManhourConsumptionPercentage(manhourConsumptionPercentage)
+   setChartTeam(chartTeam)
   }, [teamProjectResult]);
 
   useEffect(() => {
@@ -613,6 +618,14 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
         }
       }
     },
+    legend:{
+      show: true,
+      showForSingleSeries: true,
+      customLegendItems: chartTeam,
+      markers: {
+        fillColors: color
+      }
+    },
     annotations: {},
   };