Chart shortcode

Jamie Poitra edited this page Jul 11, 2018 · 9 revisions

Once you've got a chart you want to use in a post make sure you've published it. Then copy the Shortcode generated for you at the bottom of the chart settings (clicking on the field will automatically select the entire shortcode for you):

Shortcode

You'll notice an Image field and View button to the right of the Shortcode field. Every time you update your chart post a high resolution PNG copy will be generated as well.

The shortcode is smart enough that it will use the image version in situations where the Javascript version will not work. The best example of that is in your RSS or Atom feeds or as of v.1.5 when an AMP page is being displayed via the AMP plugin.

The copied shortcode can then be pasted into your other post types:

Hello world

Then wherever the shortcode was placed you get a nicely rendered Chart on the front end:

Hello world front end

And it even works well on mobile:

Hello world front end mobile

Image

If you wish to force the shortcode to use the PNG version of a chart you can the show="image" attribute to the shortcode:

[chart id="134" show="image"]

HTML Table

Available in M Chart v.1.5+

In some cases you may want to output the raw data in an HTML table. In those cases you can do so by adding show="table" to the shortcode:

[chart id="134" show="table"]

This will output a basic HTML table that matches the data in the Chart.

Share HTML

Available in M Chart v.1.6+

Version 1.6 added iframe embeds. If you've enabled that feature in the settings and you want to make it easier for visitors to embed your charts in their own sites you can use the share="show" attribute to include the embed code in a selectable text area under the chart:

[chart id="134" share="show"]

Chart with Share attribute

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.