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

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: chart_type,
backgroundColor: 'rgba(255,255,255,0)',
width: this.chartWidth,
height: this.chartHeight,
options3d: {
enabled: this.chart_settings.threed_chart_settings.enabled_threed,
alpha: this.chart_settings.threed_chart_settings.alpha_value,
axisLabelPosition: "auto",
beta: this.chart_settings.threed_chart_settings.beta_value,
depth: this.chart_settings.threed_chart_settings.depth_value,
viewDistance: 25
},
spacingTop: this.chart_settings.title_setting.show_title ? !this.emptyChartData ? 10 : 25 : 25
},
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: {
fontSize: this.chart_settings.title_setting.font_size + 'px',
color: this.chart_settings.title_setting.font_color,
fontWeight: this.chart_settings.title_setting.font_style.bold,
fontStyle: this.chart_settings.title_setting.font_style.italic,
textDecoration: this.chart_settings.title_setting.font_style.underline,
'font-family': this.chart_settings.title_setting.font_family + ', sans-serif'
},
align: this.chart_settings.title_setting.horizontal_align,
verticalAlign: this.chart_settings.title_setting.vertical_align
},
credits: {
enabled: false
},
legend: {
enabled: this.chart_settings.legend_setting.show_legend,
itemStyle: {
fontSize: this.chart_settings.legend_setting.font_size + 'px',
color: this.chart_settings.legend_setting.font_color,
fontWeight: this.chart_settings.legend_setting.font_style.bold,
fontStyle: this.chart_settings.legend_setting.font_style.italic,
textDecoration: this.chart_settings.legend_setting.font_style.underline,
'font-family': this.chart_settings.legend_setting.font_family + ', sans-serif'
},
align: this.chart_settings.legend_setting.horizontal_align,
verticalAlign: this.chart_settings.legend_setting.vertical_align,
alignColumns: false,
navigation: {
enabled: false
},
symbolRadius: this.chart_settings.legend_setting.symbol_type == "square" ? 0 : 100,
symbolHeight: 12,
symbolWidth: 12
},
xAxis: {
visible: this.chart_settings.X_AXIS_setting.show_label,
gridLineColor: this.chart_settings.X_AXIS_setting.show_grid_lines ? '#e6e6e6' : 'transparent',
gridLineWidth: 1,
categories: chart_data[chart_data.length - 1].label,
crosshair: true,
labels: {
style: {
fontSize: this.chart_settings.X_AXIS_setting.font_size + 'px',
color: this.chart_settings.X_AXIS_setting.font_color,
fontWeight: this.chart_settings.X_AXIS_setting.font_style.bold,
fontStyle: this.chart_settings.X_AXIS_setting.font_style.italic,
textDecoration: this.chart_settings.X_AXIS_setting.font_style.underline,
'font-family': this.chart_settings.X_AXIS_setting.font_family + ', sans-serif'
},
format: x_axes_label.prefix + '{value}' + x_axes_label.suffix
}
},
yAxis: {
visible: this.chart_settings.Y_AXIS_setting.show_label,
gridLineColor: this.chart_settings.Y_AXIS_setting.show_grid_lines ? '#e6e6e6' : 'transparent',
gridLineWidth: 1,
reversedStacks: false,
min: 0,
title: {
text: ''
},
labels: {
style: {
fontSize: this.chart_settings.Y_AXIS_setting.font_size + 'px',
color: this.chart_settings.Y_AXIS_setting.font_color,
fontWeight: this.chart_settings.Y_AXIS_setting.font_style.bold,
fontStyle: this.chart_settings.Y_AXIS_setting.font_style.italic,
textDecoration: this.chart_settings.Y_AXIS_setting.font_style.underline,
'font-family': this.chart_settings.Y_AXIS_setting.font_family + ', sans-serif'
},
format: y_axes_label.prefix + '{value}' + y_axes_label.suffix
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
borderWidth: 0,
depth: 25
},
line: {
marker: {
symbol: this.chart_settings.legend_setting.symbol_type,
}
},
bar: {
stacking: 'normal',
pointPadding: 0,
borderWidth: 0
},
area: {
stacking: 'normal',
marker: {
symbol: this.chart_settings.legend_setting.symbol_type
}
},
pie: {
borderColor: 'rgba(255,255,255,0)',
innerSize: isdoughnut ? doughnut_circle_size + '%' : '0%',
showInLegend: true,
dataLabels: {
format: this.chart_settings.pie_label_setting.format_value == 'value' ? this.chart_settings.label_setting.label_values.prefix + '{y}' + this.chart_settings.label_setting.label_values.suffix : '{point.percentage:.1f}%',
connectorWidth: this.chart_settings.pie_label_setting.connector_thick,
padding: 1
},
depth: this.chart_settings.threed_chart_settings.depth_value,
startAngle: this.select_chart_type == "semi-doughnut" ? -90 : undefined,
endAngle: this.select_chart_type == "semi-doughnut" ? 90 : undefined,
center: this.select_chart_type == "semi-doughnut" ? ['50%', '85%'] : [null, null],
size: this.select_chart_type == "semi-doughnut" ? '120%' : null
},
cylinder: {
colors: chart_data[chart_data.length - 1].color_array,
colorByPoint: true
},
series: {
animation: false,
dataLabels: {
enabled: this.chart_settings.label_setting.show_label,
style: {
textShadow: false,
textOutline: 'none',
fontSize: this.chart_settings.label_setting.font_size + 'px',
color: this.chart_settings.label_setting.font_color,
fontWeight: this.chart_settings.label_setting.font_style.bold,
fontStyle: this.chart_settings.label_setting.font_style.italic,
textDecoration: this.chart_settings.label_setting.font_style.underline,
'font-family': this.chart_settings.label_setting.font_family + ', sans-serif'
},
format: this.chart_settings.label_setting.label_values.prefix + "{y}" + this.chart_settings.label_setting.label_values.suffix
}
},
},
series: dataSeries
});


How can do proper render barchart.

Continue reading...