Chart Legend Not scaling with window size

The Legend of the chart is not being resized properly with the browser window is resized. The chart resizes and narrows but the legend gets cutoff and is not readable.Currently the style of the charts are 100% width and a static 250px in height. Is there anything I can do to maintain the legend as the page scales in size?

I am not sure I understand your question. Can you attach a screenshot? The legend is supposed to scroll when there is not enough space.

We there seems to be 2 issues. First when the page loads the charts are oversized.
image
Then if I resize the window even the smallest amount the charts snap to the correct size except the wording on the Legend is unreadable as it is cut off.
image
I have played with setting the height and width to a static value, the columns and the row they are in all to no luck.

Unfortunately the open source chart component that we use doesn't allow any way to control the size of the legend. The problem can be seen on their demos as well when width is set to a smaller value.

Here is the implementation - it always assumes the legend is 1 or 2 "columns" from 12 - so it divides the total chart with by 12 and uses that as the width of the legend. I tried overriding it with CSS but the results were not acceptable.

We will address the initial size issue and expose a new property that will allow you to change the position of the legend below the chart. This is the only solution that comes to mind.

Thanks you, That should work.