Chart.js Shortcodes for WordPress

WordPress plugin that provides shortcodes for easier use of the Chart.js charts in your content.

Requirements

This plugin won't do anything if you don't have WordPress theme built with the Chart.js framework. This plugin does not include the Chart.js scripts.

The plugin is tested to work with WordPress 4.0.

This plugin contains a composer.json file for those of you who manage your PHP dependencies with Composer.

Shortcode Reference

Chart Examples

• Line
• Bar
• Radar
• Polar Area
• Pie
• Doughnut
• Shortcode Parameters

Usage

Charts

Line

  [chart width="600" height="400" type="line" labels="January, February, March, April, May, June, July"]
    [data values="65, 59, 80, 81, 56, 55, 40" label="My First dataset" fillcolor="rgba(220,220,220,0.2)" strokecolor="rgba(220,220,220,1)" pointcolor="rgba(220,220,220,1)" pointstrokecolor="#fff" pointhighlightfill="#fff" pointhighlightstroke="rgba(220,220,220,1)"]
    [data values="28, 48, 40, 19, 86, 27, 90" label="My Second dataset" fillcolor="rgba(151,187,205,0.2)" strokecolor="rgba(151,187,205,1)" pointcolor="rgba(151,187,205,1)" pointstrokecolor="#fff" pointhighlightfill="#fff" pointhighlightstroke="rgba(151,187,205,1)"]
  [/chart]

Bar

  [chart width="600" height="400" type="bar" labels="January, February, March, April, May, June, July"]
    [data values="65, 59, 80, 81, 56, 55, 40" label="My First dataset" fillcolor="rgba(220,220,220,0.5)" strokecolor="rgba(220,220,220,0.8)" highlightfill="rgba(220,220,220,0.75)" highlightstroke="rgba(220,220,220,1)"]
    [data values="28, 48, 40, 19, 86, 27, 90" label="My Second dataset" fillcolor="rgba(151,187,205,0.5)" strokecolor="rgba(151,187,205,0.8)" highlightfill="rgba(151,187,205,0.75)" highlightstroke="rgba(151,187,205,1)"]
  [/chart]

Radar

  [chart width="600" height="400" type="radar" labels="Eating, Drinking, Sleeping, Designing, Coding, Cycling, Running]
    [data values="65, 59, 90, 81, 56, 55, 40" label="My First dataset" fillcolor="rgba(220,220,220,0.2)" strokecolor="rgba(220,220,220,1)" pointcolor="rgba(220,220,220,1)" pointstrokecolor="#fff" pointhighlightfill="#fff" pointhighlightstroke="rgba(220,220,220,1)"]
    [data values="28, 48, 40, 19, 96, 27, 100" label="My Second dataset" fillcolor="rgba(151,187,205,0.2)" strokecolor="rgba(151,187,205,1)" pointcolor="rgba(151,187,205,1)" pointstrokecolor="#fff" pointhighlightfill="#fff" pointhighlightstroke="rgba(151,187,205,1)"]
  [/chart]

Polar Area

  [chart width="600" height="400" type="polararea"]
    [data label="Red" value="300" color="#F7464A" highlight="#FF5A5E"]
    [data label="Green" value="50" color="#46BFBD" highlight="#5AD3D1"]
    [data label="Yellow" value="100" color="#FDB45C" highlight="#FFC870"]
    [data label="Grey" value="40" color="#949FB1" highlight="#A8B3C5"]
    [data label="Dark Grey" value="120" color="#4D5360" highlight="#616774"]
  [/chart]

Pie

  [chart width="600" height="400" type="pie"]
    [data label="Red" value="300" color="#F7464A" highlight="#FF5A5E"]
    [data label="Green" value="50" color="#46BFBD" highlight="#5AD3D1"]
    [data label="Yellow" value="100" color="#FDB45C" highlight="#FFC870"]
  [/chart]

Doughnut

  [chart width="600" height="400" type="doughnut"]
    [data label="Red" value="300" color="#F7464A" highlight="#FF5A5E"]
    [data label="Green" value="50" color="#46BFBD" highlight="#5AD3D1"]
    [data label="Yellow" value="100" color="#FDB45C" highlight="#FFC870"]
  [/chart]

Shortcode Parameters

[chart] parameters

Parameter	Description	Required	Values	Default
width	width, in pixels, of the chart	required	any number	false
height	height, in pixels, of the chart	required	any number	false
labels	Data point labels separated by a comma. Number of labels must match the number of data points in the [data] shortcodes	optional	any text	none
legend	Generate legend for this chart. Note: legend requires additional styling in your WordPress theme	optional	true/false	false

[data] parameters for Line, Bar, and Radar charts

Parameter	Description	Required	Values	Default
data	Data points separated by a comma. Number of data points must match the number of labels in the [chart] shortcode	optional	any text	none
label	Data set label	optional	any text	false
fillcolor	Line or bar fill color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
strokecolor	Line or bar stroke (outline) color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
highlightfill	Line or bar fill highlight (mouse-over) color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
highlightstroke	Line or bar stroke (outline) highlight (mouse-over) color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
pointcolor	Data point color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
pointstrokecolor	Data point stroke (outline) color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
pointhighlightfill	Data point highlight (mouse-over) color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
pointHighlightStroke	Data point stroke (outline) highlight (mouse-over) color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false

[data] parameters for Polar Area, Pie and Doughnut charts

Parameter	Description	Required	Values	Default
value	Data point value	optional	any number	false
label	Data point label	optional	any text	false
color	Area fill color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false
highlight	Area highlight (mouse-over) color	optional	any valid CSS color value. You can use HEX notation, RGB, RGBA or HSL.	false

---