Full Width Charts

By default, the plugin draws charts in a containing <div> like this:

<div style="display:inline-block;">...</div>

This makes the <div> the size of the chart, and allows other content to flow around the chart. The plugin has an optional parameter, "full_width", which removes the "display:inline-block;" attribute. The <div> now defaults to display:block, and occupies the full width of its container.

{plotalot id="1" full_width}

Results in this:

<div>...</div>

If the chart has its width set to blank or zero, the chart will now occupy the width the container, whatever that may be. If the window resizes (for example when a mobile device is rotated), the chart will be re-drawn at the new width. This is a quick and easy way to make charts responsive. A more powerful method is described later.