Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

TablePress Extension: Chartist

Create a responsive chart based on the data in a TablePress table.

Using Chartist.js, this TablePress Extension creates a responsive chart based on the data in a TablePress table.


Add the Shortcode [table-chart id=123 /] to a post or page to create a chart from the TablePress table 123.

Optional parameters:

  • Show/hide chart line: showline=true (default: true)
  • Show/hide show chart area: showarea=false (default: false)
  • Set chart y low: low=0 (default: table low)
  • Set chart y high: high=10 (default: table high)
  • Enable/disable smooth line: linesmooth=true (default: true)
  • Enable/disable line points: showpoint=true (default: true)
  • Enable/disable horizontal bars: horizontal=true (default: false)
  • Enable/disable stacked bars: stack=true (default: false)
  • Set chart aspect ratio: aspect_ratio=3:4 (default: 3:4) Alternatives: 1, 15:16, 8:9, 5:6, 4:5, 3:4, 2:3, 5:8, 1:1.618, 3:5, 9:16, 8:15, 1:2, 2:5, 3:8, 1:3, or 1:4
  • Select chart type: chart=bar (default: line) Alternatives: line, bar, pie, donut or percent.
  • Use animations (not available for all chart types): animation=buildup (default: false) If the "Table Head Row" option is enabled for the table, the Extension will use the head row data for the chart labels. The other rows will be shown as lines or bars. Pie or percent charts will only use the first data row. Percent charts will ignore the header row.

CSS customizations

If you'd like to overide the default style, you can add a tablepress-chartist-custom.css in wp-content directory. It will be loaded after the Extension's default CSS file libdist/chartist.min.css.


 * SVG Shape CSS properties:

/* First line / bar is .ct-series-a, next is .ct-series-b etc. */
.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point  {
    stroke: #073DA0;

.ct-series .ct-line, .ct-chart .ct-bar {
    fill: none;
    stroke-width: 10px;

.ct-chart .ct-point {
    stroke-width: 10px;
    stroke-linecap: round;
Author Silsha Fux
Contributors PerS, silsha
Tags chart, responsive, table, tablepress
  1. charts-for-tablepress-chartist screenshot 1

    [table-chart id=1 /]

  2. charts-for-tablepress-chartist screenshot 2

    [table-chart id=1 showarea=true /]

  3. charts-for-tablepress-chartist screenshot 3

    [table-chart id=1 showarea=true linesmooth=false /]

  4. charts-for-tablepress-chartist screenshot 4

    [table-chart id=1 linesmooth=false showpoint=false /]

  5. charts-for-tablepress-chartist screenshot 5

    [table-chart id=1 showarea=true showline=false showpoint=false /]

  6. charts-for-tablepress-chartist screenshot 6

    [table-chart id=1 low=0 high=8 /]

  7. charts-for-tablepress-chartist screenshot 7

    [table-chart id=1 chart=bar /]

  8. charts-for-tablepress-chartist screenshot 8

    [table-chart id=1 chart=pie /]

  9. charts-for-tablepress-chartist screenshot 9

    [table-chart id=1 chart=percent /]

Prerequisite (install first): The TablePress plugin

  1. In Plugins->Add New, search for tablepress chartist
  2. Click Install Now
  3. When the plugin is installed, activate it.


  • Added support for horizontal bars (horizontal=true)
  • Added support for stacked bars (stack=true)
  • Added simple animation for line charts
  • Merged “Addition of donut chart type #1” by shaharhesse


Switch to [table-chart] Shortcode.


  • Revert to PHP json_encode().


  • Breaking change: Simplified optional parameters (removed prefix chartist_), new optional parameters are: showline, showarea, low, high, linesmooth, showpoint and aspect_ratio. See examples in screenshots.
  • Added support for chart=pie and chart=percent.


  • Added support for bar chart: chartist_chart=bar.


  • 0.3 Added support for CSS customizations.


  • Added more optional parameters.


  • Initial release
Version 0.7

Requires WordPress version: 4.3 or higher

Compatible up to: 4.7.2

Last Updated 21 Jan 2017

Date Added: 20 Jan 2017

Plugin Homepage


0 stars
0 ratings


Not Enough Data

Works: 0
Broken: 0