apexcharts / vue-apexcharts

📊 Vue 2 component for ApexCharts
https://apexcharts.com
MIT License
1.33k stars 135 forks source link

Legend height being capped by foreignobject #240

Closed df165 closed 2 weeks ago

df165 commented 4 years ago

I have a donut chart with a legend key, I can't set the height to be as large as I want to get rid of the scrollbars because then the extra legends are hidden by foreignobject. The only way they show is if I increase the height of foreignobject. https://i.imgur.com/yV6g3Zw.png - Legend height set https://i.imgur.com/HvwoJ7K.png - The extra options do not show because of the ForeignObject capping the height.

So what I'm trying to achieve is for all the legend keys to show without the users having to use the scrollbar.

Option code; options: { chart: { height: 140, width: '100%', events: { dataPointSelection: onClick, markerClick: onClick, legendClick: onClick }, type: 'donut', animations: { enabled: true, easing: 'easeinout', speed: 80, animateGradually: { enabled: true, delay: 1500 }, dynamicAnimation: { enabled: true, speed: 350 } } }, stroke: { colors: [theme.colors.backgroundPrimary] }, theme: { mode: 'light', monochrome: { enabled: true, color: '#B9B9B9', shadeTo: 'dark', shadeIntensity: 0.9 }, }, dataLabels: { enabled: false, foreColor: '#fff', padding: 4, borderRadius: 2, borderWidth: 1, borderColor: '#fff', opacity: 0.5 }, legend: { height: 200, width: '100%', offsetX: -20, offsetY: 0, floating: false, position: 'right', show: true, labels: { colors: [theme.colors.textPrimary], useSeriesColors: false } }, tooltip: { custom: (stuff: any) => { const index = stuff.seriesIndex; return (

${labels[index]}
); } }, labels: labels, }

ac63181 commented 3 years ago

chart: { sparkline: { enabled: true } }

github-actions[bot] commented 3 weeks ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.