diff --git a/src/assets/css/components/views/charts2/npmEventsByType.scss b/src/assets/css/components/views/charts2/npmEventsByType.scss
index bffab862..a6357f3c 100644
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -35,10 +35,6 @@
             margin-bottom: 15px;
           }
           .npm-event-pie-legend-type {
-            font-size: 12px;
-            color: #353636;
-            line-height: 12px;
-            font-weight: 500;
             display: flex;
             align-items: center;
             margin-bottom: 11px;
@@ -48,6 +44,10 @@
               margin-right: 5px;
             }
             .npm-event-pie-legend-type-severity {
+              font-size: 12px;
+              line-height: 12px;
+              color: #353636;
+              font-weight: 400;
               text-transform: capitalize;
             }
             .critical {
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 003c8e71..e4693f58 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -783,7 +783,7 @@ export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8
 export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#9FBC1D', '#98709B']
 
 export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#9FBC1D', '#F5F1F5']
-export const chartColor5 = ['#E26154', '#E48E4D', '#E7B34E', '#DAC74B', '#88AF65']
+export const chartColor5 = ['#E26154', '#E7B34E', '#88AF65']
 
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',
diff --git a/src/views/charts2/charts/npm/NpmAppEventTable.vue b/src/views/charts2/charts/npm/NpmAppEventTable.vue
index 36363e47..fcb1ec95 100644
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -154,7 +154,6 @@ export default {
             this.isNoData = true
           }
           this.tableData = res.data.result
-          console.log(res.data.result)
         } else {
           this.isNoData = true
         }
diff --git a/src/views/charts2/charts/npm/NpmEventsByType.vue b/src/views/charts2/charts/npm/NpmEventsByType.vue
index 76d298aa..8649a3ea 100644
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -10,15 +10,14 @@
             <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
             <template v-for="(legend, index) in chartData" :key="index">
               <div class="npm-event-pie-legend-type">
-                <div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div>
-                <div class="npm-event-pie-legend-type-severity">{{legend.eventSeverity}}</div>
+                <div class="npm-event-pie-legend-type-severity">{{legend.name}}</div>
               </div>
             </template>
           </div>
           <div class="npm-event-pie-legend">
             <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
             <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-total">{{legend.count}}</div>
+              <div class="npm-event-pie-legend-total">{{legend.value}}</div>
             </template>
           </div>
         </div>
@@ -83,7 +82,7 @@ export default {
           formatter: function () {
             let num = 0
             _this.chartData.forEach(t => {
-              num += t.count
+              num += t.value
             })
             return num
           }
@@ -108,7 +107,7 @@ export default {
           formatter: function () {
             let num = 0
             _this.chartData.forEach(t => {
-              num += t.count
+              num += t.value
             })
             return num
           }
@@ -123,32 +122,24 @@ export default {
         type: 'severity'
       }
       this.toggleLoading(true)
-      get(api.npm.events.list, params).then(res => {
+      get(api.npm.events.recentEvents, params).then(res => {
         if (res.code === 200) {
           if (!res.data.result || res.data.result.length === 0) {
             this.isNoData = true
             return
           }
+          const arrData = []
           res.data.result.forEach(t => {
-            if (t.eventSeverity === 'critical') {
-              t.index = 0
-            } else if (t.eventSeverity === 'high') {
-              t.index = 1
-            } else if (t.eventSeverity === 'info') {
-              t.index = 4
-            } else if (t.eventSeverity === 'low') {
-              t.index = 3
-            } else if (t.eventSeverity === 'medium') {
-              t.index = 2
-            }
-          })
-          this.chartData = res.data.result.sort((a, b) => { return a.index - b.index })
-          this.chartData = this.chartData.map(t => {
-            return {
-              ...t,
-              value: t.count
+            const hit = arrData.find(e => e.name === t.eventType)
+            if (hit) {
+              arrData.forEach(d => {
+                d.value++
+              })
+            } else {
+              arrData.push({ name: t.eventType, value: 1 })
             }
           })
+          this.chartData = arrData.sort((a, b) => { return b.value - a.value })
           this.init()
         } else {
           this.isNoData = true