Enhance your comparable data display with animated graphic pie chart. Styled data table included, with a lot of further styling options.

Insert anywhere in the post or page via shortcode.

Make your own defaults to avoid writing long shortcode and maximize site outlook blending.



  • easy to use – supply shortcode with minimum two data pairs and you are ready to go
  • responsive design – graph will fit any screen size automatically
  • mobile friendly – it will look nice on mobile devices
  • customizable – lots of options to make your graph outlook unique
  • theme friendly – tested on various WordPress themes (but we strongly recommend you to test plugin in your own theme)



From your WordPress dashboard
  1. Visit ‘Plugins > Add New’
  2. Search for ‘Goo Pie Chart’
  3. Activate ‘Goo Pie Chart’ from your Plugins page.
  4. You are ready to go
  1. Download ‘Goo Pie Chart’
  2. Upload the ‘Goo Pie Chart’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, file manager etc…), and decompress it.
  3. Activate ‘Goo Pie Chart’ from your Plugins page
  4. You are ready to go

(need more help with plugin installation?)


How to use

In post/page editor insert shortcode [goo-pie-chart data="set1=75, set2=25"] anywhere in text (as a separate paragraph) where you want to display chart. Fill data option with your actual data pairs, and add any other option you prefer.


for more ‘how to use’ examples please visit test/development page here



Access plugin settings from admin panel > Goo Tools Plugins > Goo Pie Chart


Shortcode option list

Use anywhere in post as: option order is arbitrary

name syntax default description example
data data=”{string}={integer}, {string}={integer}…” / Crucial. Minimum two data pairs. Data sets to be represented in pie chart. data=”European Union=160, United States=80″
colors colors=”{#hex_color}, {#hex_color}…” / Assign arbitrary color for each data pair. colors=”#c1f404, #7e9404″
height height=”{integer}” Insert graph container height (px). This is max container height also. (responsive) height=”300″
width width=”{integer}” Insert graph container width (px). This is max container width also. (responsive) width=”300″
data-name data-name=”{string}” / Assign arbitrary caption for column containing data description. Use with data-amount option. data-name=”Country”
data-amount data-amount=”{string}” amount Assign arbitrary caption for column containing data values. Use with data-name option. If omitted, but data-name is used, plugin will use default value. data-amount=”in thousands”
data-caption-bck data-caption-bck=”{#hex_color}” Assign data rows caption background color, Use with data-name option. If omitted, but data-name is used, plugin will use default value. data-caption-bck=”#add8e6″
caption caption=”{string}” / Assign table caption caption=”Site visitors”
caption-background caption-background=”{#hex_color}” Assign table caption background color, Use with caption option. caption-background=”#add8e6″
percent percent=”{on||off}” Exclude percent data row from table percent=”off”
outline-color outline-color=”{#hex_color}” Set chart slices outline color. outline-color=”#66ff99″
force-shades force-shades=”{#hex_color_start, #hex_color_end}” Render and assign colors according RGB spectre from “start” to “end” color to available data pairs. force-shades=”#cce0ff, #003380″
table-class table-class=”{string}” Assign your custom CSS class to data table. table-class=”my_custom_table_class”



Notice: all defaults can be overridden from shortcode input. Eg. if you turn off ‘percent’ option, you can always turn it on via short code for particular graph. Defaults are triggered only if option is omitted in shortcode.


Thank you!

Something to say...

Pin It on Pinterest

Share This