TablePress Extension: Chartist

plugin banner

Using [Chartist.js](http://gionkunz.github.io/chartist-js/), this [TablePress](https://wordpress.org/plugins/tablepress/) Extension creates a responsive chart based on the data in a TablePress table.

= Use =

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.

Author:Silsha Fux (profile at wordpress.org)
WordPress version required:5.9
WordPress version tested:5.9.3
Plugin version:0.10.1
Added to WordPress repository:20-01-2017
Last updated:21-04-2022
Rating, %:100
Rated by:5
Plugin URI:https://github.com/silsha/tablepress_chartist
Total downloads:15 680
Active installs:1 000+
plugin download
Click to start download

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

Use

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)
  • Set line with of the donut chart: donut_width=200 (default: false)
  • 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, percent or piepercent (mix of pie and percent).
  • Set label offset: label_offset=100 (default: false)
  • Set chart padding: chart_padding=100 (default: false)
  • 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.

Example:

/**
 * SVG Shape CSS properties: http://tutorials.jenkov.com/svg/svg-and-css.html#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;
}

Screenshots
ChangeLog