Charts

The Charts shortcode for WordPress can be used to display various chart types like column, line, bar, pie, donut, radial, radar, semi-circle, inside the content, visually presenting different datasets. Check below for example implementations and shortcode documentation:

Chart Examples

  • Bar
  • Line
  • Pie
  • Donut
  • Radial
  • Radar
  • Sales
  • Expenses
  • Profit
  • Sales
  • Expenses
  • Profit
  • Sales
  • Expenses
  • Profit
  • Sales
  • Expenses
  • Profit
  • Sales
  • Expenses
  • Profit
  • Sales
  • Expenses
  • Profit
  • Sales
  • Expenses
  • Profit

Chart Shortcodes

Shortcode
[x3m-chart type="bar" legend="Sales;Expenses;Profit" value="80;50;30" color="blue;red;green" align="left" maxwidth="100%" maxheight="300px"]
The shortcode can be used to display a chart with a set of data. Various types of charts are available, with complete color and value customisations. Above example displays charts for each of the available styles, with 3 set values.

If you need to create charts which will compare datasets from multiple options/labels, you may want to check the Pro Charts shortcode.

Chart Documentation

Here are the shortcode option settings available for Charts:

Shortcode Settings Details
type=”column” used to set the chart type:
– “bar” used to display bar style chart
– “column” used to display column style chart
– “line” used to display line style chart
– “pie” used to display pie style chart
– “donut” used to display donut style chart
– “radial” used to display radial style chart
– “radar” used to display radar style chart
– “semi-circle” used to display semi-circle style chart
legend=”Name A;Name B;Name C” used to set the chart labels corresponding to values (labels separated by “;”)
value=”80;50;30″ used to set the chart values in the same order corresponding to the labels set earlier (values separated by “;”)
color=”blue;red;green” used to set the chart colors in the same order corresponding to the labels set earlier (values separated by “;”)

Color names or HEX color codes can be used to set the desired color.

align=”left” used to set the chart alignment:
– “left” sets the chart to the left and legend to the right
– “right” sets the chart to the right and legend to the left
maxwidth=”100%” defines maximum chart width. It can be set both in percentage (ex “100%”) or pixels (ex “300px”)
maxheight=”300px” defines maximum chart height. It can be set both in percentage (ex “50%”) or pixels (ex “300px”)

The charts can use any number of values. A minimum of 1 value should be used. When using multiple values, make sure to list labels, values and colors in the same order across the settings.