Not proper show 3d chart with type of the barchart in Highchart Angular 18

Question

enter image description here
Version : "highcharts": "^11.4.7",

In this Below Code All another chart proper work but only 3d barchart not render proper, simple barchart also do proper work but when barchart swtich on the 3d bar chart then issue faces.

Same code work on the Older package Version and its work fine.

this.myChart = Highcharts.chart({
  chart: {
    renderTo: "chartcontainer",
    type: "bar",
    backgroundColor: "rgba(255,255,255,0)",
    width: 600,
    height: 400,
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      axisLabelPosition: "auto",
      viewDistance: 25,
    },
    spacingTop: 10,
  },
  noData: {
    style: {
      fontWeight: "bold",
      fontSize: "15px",
    },
  },
  title: {
    text: this.chart_settings.title_setting.show_title
      ? !this.emptyChartData
        ? this.chart_settings.title_setting.title_name
        : " "
      : " ",
    style: {
      color: "#000000",
      fontWeight: "normal",
      fontSize: "24px",
      fontStyle: "none",
      textDecoration: "none",
      "font-family": "Roboto-Regular, sans-serif",
    },
    align: "center",
    verticalAlign: "top",
  },
  credits: {
    enabled: false,
  },
  legend: {
    enabled: true,
    itemStyle: {
      color: "#000000",
      cursor: "pointer",
      fontSize: "13px",
      textDecoration: "none",
      textOverflow: "ellipsis",
      fontWeight: "normal",
      fontStyle: "none",
      "font-family": "Roboto-Regular, sans-serif",
    },
    align: "center",
    verticalAlign: "bottom",
    alignColumns: false,
    navigation: {
      enabled: false,
    },
    symbolRadius: 100,
    symbolHeight: 12,
    symbolWidth: 12,
  },
  xAxis: {
    visible: true,
    gridLineColor: "#e6e6e6",
    gridLineWidth: 1,
    categories: ["Item1", "Item2", "Item3", "Item4", "Item5"],
    crosshair: true,
    lineWidth: 0,
    labels: {
      style: {
        color: "#000000",
        cursor: "default",
        fontSize: "13px",
        fontWeight: "normal",
        fontStyle: "none",
        textDecoration: "none",
        "font-family": "Roboto-Regular, sans-serif",
      },
      format: "{value}",
    },
  },
  yAxis: {
    visible: true,
    gridLineColor: "#e6e6e6",
    gridLineWidth: 1,
    reversedStacks: false,
    lineWidth: 0,
    min: 0,
    title: {
      text: "",
    },
    labels: {
      style: {
        color: "#000000",
        cursor: "default",
        fontSize: "13px",
        fontWeight: "normal",
        fontStyle: "none",
        textDecoration: "none",
        "font-family": "Roboto-Regular, sans-serif",
      },
      format: "{value}",
    },
  },
  plotOptions: {
    bar: {
      stacking: "normal", // If you're stacking bars
      pointPadding: 0, // Remove space between bars
      borderWidth: 0,
      depth: t25, // 3D depth for bars
      edgeColor: "rgba(0,0,0,0.05)", // Edge color to enhance 3D visibility
      edgeWidth: 1, // Edge width to highlight 3D effect,
      groupZPadding: 40,
    },

    series: {
      animation: false,
      dataLabels: {
        enabled: true,
        style: {
          fontSize: "13px",
          fontWeight: "normal",
          color: "#000000",
          textOutline: "none",
          textShadow: false,
          fontStyle: "none",
          textDecoration: "none",
          "font-family": "Roboto-Regular, sans-serif",
        },
        format: "{y}",
      },
    },
  },
  series: dataSeries,
})

How can do proper render barchart.

Answer 1

Issue is because of the 3d Row Chart animation and during the animation html2Canvas image capture image and that image show in canvas that's why issue face so I have disable the animation then proper work