lineChartProps={{
          className: "bn-build-history--chart",
          scale: {
            color: {
              range: ["#d4335c", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4"],
            },
          },
          xField: "index",
          yField: "durationIncreasePercentage",
          colorField: "config",
          data: filteredData,
          shapeField: "smooth",
          point: {
            shapeField: "circle",
            sizeField: 6,
          },
          axis: {
            x: {
              label: false,
            },
            y: {
              title: "Runtime",
              label: false,
            },
          },
          legend: {
            color: {
              position: "bottom",            
              maxRows: 2,
              navLoop:true,
              navOrientation:"vertical",
              // navControllerSpacing:[50,50,50,50],
              //navControllerPadding:[50,100,50,100],
              itemLabelText: (value: {
                id: string;
                color: string;
                label: string;
              }) => {
                return getBuildConfigName(
                  typeof value == "string" ? value : value.id,
                  configMap,
                  recentBuildsConfigMap
                );
              },
              itemMarker: "circle",
            },
          },
          style: {
            lineWidth: 3,
          },

          tooltip: {
            //   title: (value: IChartData) =>
            //     dayjs(value.date).format("DD MMM YYYY hh:mm A"),
            items: [
              (datum: IChartData) => {
                return {
                  name: getBuildConfigName(
                    datum.config,
                    configMap,
                    recentBuildsConfigMap
                  ),
                  counter: datum.counter,
                  datum,
                };
              },
            ],
          },
          interaction: {
            tooltip: {
              enterable: true,
              position:"bottom",
              bounding: { x: 0, y: 50, width: 400, height: 10000 },

              render: (
                event: any,
                options: {
                  title: string;
                  items: {
                    color: string;
                    name: string;
                    datum:IChartData;
                    counter: string;
                  }[];
                }
              ) => {
                return getTooltipItem(options.title, options.items, event);
              },
            },
          },
          ...lineChartProps,
        }}