Apex Chart Multiple Legend

Question

Title How to render different shapes for Legends in ApexCharts in Angular?

Description: I'm working on Angular application where I'm using Apexcharts to visualize data. I need to customize the legends so that each legend item will display a different shape corresponding to chart series it represents. I have tried using the 'shape' property in the legend markers suggested by the documentation but I couldn't find the property in the type definitions(apex-types.d.ts).

Question: How can I render different shapes for each legend item in ApexCharts using Angular? Is there any alternate approach I should consider?

Attaching sandbox link for reference.

https://codesandbox.io/s/apx-column-basic-bm9dd?from-embed=&file=/src/app/app.component.ts

I Tried I tried by customHTML function which is available in documentation as well as tried shape in sandbox where I couldn't get the expected results.

sample Code legend: { show: true, markers: { shape: ["line","Circle"], height: 2 } }

Expecting: How can I render different shapes for each legend item in ApexCharts using Angular? Is there any alternate approach I should consider?