Pro Charts

The Pro Charts shortcode for WordPress can be used to display and compare multiple datasets in different chart types like line, column grouped, column stacked, bar grouped, bar stacked, bullet, diverging-bar, radar or area. The charts can be included inside the content, interactively presenting and comparing different datasets. Check below for example implementations and shortcode documentation:

Pro Chart Examples

  • Bar Stacked
  • Column Grouped
  • Column Stacked
Pro Charts are interactive. You may click on the labels in the Legend to activate/deactivate a dataset.
  • Area
  • Bullet
  • Diverging Bar
  • Radar
Pro Charts are interactive. You may click on the labels in the Legend to activate/deactivate a dataset.

Pro Chart Shortcodes

Shortcode
[x3m-prochart type="bar-grouped" labels="Jan;Feb;Mar" value-1="CompanyA;red;75;78;64" value-2="CompanyB;blue;44;67;62" maxwidth="100%" maxheight="300px"]
The shortcode can be used to display a pro chart with multiple sets of data. This allows a comparison between various labels. Various types of charts are available, with complete color and value customisations. Above example displays pro charts for each of the available styles, with 2 datasets.

Pro Chart Documentation

Here are the shortcode option settings available for Pro Charts:

Shortcode Settings Details
type=”bar-grouped” used to set the chart type:
– “bar-grouped” used to display group of bars style chart
– “bar-stacked” used to display staked bars style chart
– “column-grouped” used to display group of columns style chart
– “column-stacked” used to display staked columns style chart
– “line” used to display line style chart
– “area” used to display area style chart
– “bullet” used to display donut style chart
– “diverging-bar” used to display radial style chart
– “radar” used to display radar style chart
labels=”Jan;Feb;Mar” used to set the labels displayed on the chart axis (labels separated by “;”)
value-1=”CompanyA;red;75;78;64″ used to set the Dataset 1 (separated by “;”):
– first value is Dataset Name (appears on the Legend)
– second value is Color of dataset (color of line, bar, column). Color names or HEX color codes can be used to set the desired color.
– next values are numeric values for the dataset (numeric values should be of same count as with chart labels set earlier)

Subsequent datasets can be set with value-2=””, value-3=”” and so on.

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 pro charts can use any number of values. A minimum of 1 dataset and 1value should be used. When using multiple datasets and labels, make sure to list labels and dataset values in the same order across the settings.