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.
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.
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: labels, }