diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index 8a646336..e928b300 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -66,7 +66,7 @@ export function useQueryProcessor(config: any) {
           ? selectorStore.currentService.normal
           : true,
         scope: config.catalog || dashboardStore.entity,
-        topN: 10,
+        topN: c.topN || 10,
         order: c.sortOrder || "DES",
       };
     } else {
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index 3a1fe7e1..fc56a4d1 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -45,6 +45,7 @@ export type MetricConfigOpt = {
   calculation: string;
   labelsIndex: string;
   sortOrder: string;
+  topN?: number;
 };
 
 export interface WidgetConfig {
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index f10981b7..13239a6e 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -16,9 +16,9 @@ limitations under the License. -->
   <div class="widget-config flex-v">
     <div class="graph" v-loading="loading">
       <div class="header">
-        <span>{{ dashboardStore.selectedGrid.widget.title }}</span>
+        <span>{{ dashboardStore.selectedGrid.widget.title || "" }}</span>
         <div class="tips" v-show="dashboardStore.selectedGrid.widget.tips">
-          <el-tooltip :content="dashboardStore.selectedGrid.widget.tips">
+          <el-tooltip :content="dashboardStore.selectedGrid.widget.tips || ''">
             <Icon iconName="info_outline" size="sm" />
           </el-tooltip>
         </div>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
index 6c315ba2..27f7a94f 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
@@ -13,17 +13,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div>
-    <span class="label">{{ t("maxItemNum") }}</span>
-    <el-input
-      class="input"
-      v-model="topN"
+  <div class="item">
+    <span class="label">{{ t("backgroundColors") }}</span>
+    <Selector
+      :value="color"
+      :options="Colors"
       size="small"
-      placeholder="none"
-      type="number"
-      :min="1"
-      :max="100"
-      @change="updateConfig({ topN })"
+      placeholder="Select a color"
+      class="input"
+      @change="updateConfig({ color: $event[0].value })"
     />
   </div>
 </template>
@@ -35,14 +33,24 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const { selectedGrid } = dashboardStore;
-const topN = ref(selectedGrid.graph.topN);
+const color = ref(selectedGrid.graph.color || "purple");
+const Colors = [
+  { label: "Purple", value: "purple" },
+  {
+    label: "Green",
+    value: "green",
+  },
+  { label: "Blue", value: "blue" },
+  { label: "Red", value: "red" },
+  { label: "Orange", value: "orange" },
+];
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>
@@ -52,4 +60,8 @@ function updateConfig(param: { [key: string]: unknown }) {
   display: block;
   margin-bottom: 5px;
 }
+
+.input {
+  width: 500px;
+}
 </style>
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 499fd59a..6f873d8d 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -56,10 +56,7 @@ limitations under the License. -->
         :clearable="true"
       />
     </div>
-    <div
-      class="item"
-      v-show="['sortMetrics', 'readSampledRecords'].includes(metricType)"
-    >
+    <div class="item" v-show="isTopn">
       <span class="label">{{ t("sortOrder") }}</span>
       <SelectSingle
         :value="currentMetric.sortOrder || 'DES'"
@@ -68,10 +65,22 @@ limitations under the License. -->
         @change="changeConfigs(index, { sortOrder: $event })"
       />
     </div>
+    <div class="item" v-show="isTopn">
+      <span class="label">{{ t("maxItemNum") }}</span>
+      <el-input-number
+        class="selectors"
+        v-model="currentMetric.topN"
+        size="small"
+        placeholder="none"
+        :min="1"
+        :max="100"
+        @change="changeConfigs(index, { topN: currentMetric.topN || 10 })"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder, CalculationOpts } from "../../../data";
@@ -89,12 +98,22 @@ const props = defineProps({
 const { t } = useI18n();
 const emit = defineEmits(["update"]);
 const dashboardStore = useDashboardStore();
-const currentMetric = ref<MetricConfigOpt>(props.currentMetricConfig);
+const currentMetric = ref<MetricConfigOpt>({
+  ...props.currentMetricConfig,
+  topN: props.currentMetricConfig.topN || 10,
+});
 const metricType = ref<string>(
   dashboardStore.selectedGrid.metricTypes[props.index]
 );
-
-function changeConfigs(index: number, param: { [key: string]: string }) {
+const isTopn = computed(() =>
+  ["sortMetrics", "readSampledRecords"].includes(
+    dashboardStore.selectedGrid.metricTypes[props.index]
+  )
+);
+function changeConfigs(
+  index: number,
+  param: { [key: string]: string | number }
+) {
   const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
   metricConfig[index] = { ...metricConfig[index], ...param };
 
@@ -107,7 +126,10 @@ function changeConfigs(index: number, param: { [key: string]: string }) {
 watch(
   () => props.currentMetricConfig,
   () => {
-    currentMetric.value = props.currentMetricConfig;
+    currentMetric.value = {
+      ...props.currentMetricConfig,
+      topN: props.currentMetricConfig.topN || 10,
+    };
   }
 );
 </script>
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 4e89cae9..9c579027 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -77,6 +77,7 @@ export const DefaultGraphConfig: { [key: string]: any } = {
   },
   TopList: {
     type: "TopList",
+    color: "purple",
   },
   InstanceList: {
     type: "InstanceList",
@@ -263,6 +264,7 @@ export const TextColors: { [key: string]: string } = {
   white: "#fff",
   black: "#000",
   orange: "#E6A23C",
+  purple: "#bf99f8",
 };
 
 export const CalculationOpts = [
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index d22a5773..0b2fc18e 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -15,12 +15,12 @@ limitations under the License. -->
 
 <template>
   <div class="top-list">
-    <div class="chart-slow-i" v-for="(i, index) in datas" :key="index">
+    <div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
       <div class="ell tools flex-h">
         <div>
           <span class="calls mr-10">{{ i.value }}</span>
           <span class="cp mr-20">
-            {{ i.name + getTraceId(i) }}
+            {{ i.name }}
           </span>
         </div>
         <div>
@@ -28,14 +28,14 @@ limitations under the License. -->
             iconName="review-list"
             size="middle"
             class="cp"
-            @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
+            @click="handleClick(i.name)"
           />
         </div>
       </div>
       <el-progress
         :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
-        color="#bf99f8"
+        :color="TextColors[config.color]"
         :show-text="false"
       />
     </div>
@@ -45,6 +45,7 @@ limitations under the License. -->
 import type { PropType } from "vue";
 import { computed } from "vue";
 import copy from "@/utils/copy";
+import { TextColors } from "@/views/dashboard/data";
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -54,12 +55,12 @@ const props = defineProps({
     default: () => ({}),
   },
   config: {
-    type: Object as PropType<{ sortOrder: string }>,
-    default: () => ({}),
+    type: Object as PropType<{ color: string }>,
+    default: () => ({ color: "purple" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
-const key = computed(() => Object.keys(props.data)[0]);
+const key = computed(() => Object.keys(props.data)[0] || "");
 const maxValue = computed(() => {
   if (!(props.data[key.value] && props.data[key.value].length)) {
     return 0;
@@ -67,30 +68,6 @@ const maxValue = computed(() => {
   const temp: number[] = props.data[key.value].map((i: any) => i.value);
   return Math.max.apply(null, temp);
 });
-const getTraceId = (i: { [key: string]: (number | string)[] }): string => {
-  return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
-};
-const datas = computed(() => {
-  if (!(props.data[key.value] && props.data[key.value].length)) {
-    return [];
-  }
-  const { sortOrder } = props.config;
-  const val: any = props.data[key.value];
-
-  switch (sortOrder) {
-    case "DES":
-      val.sort((a: any, b: any) => b.value - a.value);
-      break;
-    case "ASC":
-      val.sort((a: any, b: any) => a.value - b.value);
-      break;
-    default:
-      val.sort((a: any, b: any) => b.value - a.value);
-      break;
-  }
-
-  return val;
-});
 function handleClick(i: string) {
   copy(i);
 }