Title: TablePress Extension: Chartist Author: silsha Published: January 20, 2017 Last modified: April 21, 2022 --- Search plugins ![](https://ps.w.org/charts-for-tablepress-chartist/assets/banner-772x250.jpg?rev =1579266) This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://ps.w.org/charts-for-tablepress-chartist/assets/icon-256x256.jpg?rev= 1579266) # TablePress Extension: Chartist By [silsha](https://profiles.wordpress.org/silsha/) [Download](https://downloads.wordpress.org/plugin/charts-for-tablepress-chartist.0.10.1.zip) * [Details](https://wordpress.org/plugins/charts-for-tablepress-chartist/#description) * [Reviews](https://wordpress.org/plugins/charts-for-tablepress-chartist/#reviews) * [Installation](https://wordpress.org/plugins/charts-for-tablepress-chartist/#installation) * [Development](https://wordpress.org/plugins/charts-for-tablepress-chartist/#developers) [Support](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/) ## Description 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) * 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](http://gionkunz.github.io/chartist-js/getting-started.html#the-sass-way), 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 [⌊[table-chart id=1 /]⌉⌊[table-chart id=1 /]⌉[ `[table-chart id=1 /]` [⌊[table-chart id=1 showarea=true /]⌉⌊[table-chart id=1 showarea=true /]⌉[ `[table-chart id=1 showarea=true /]` [⌊[table-chart id=1 showarea=true linesmooth=false /]⌉⌊[table-chart id=1 showarea =true linesmooth=false /]⌉[ `[table-chart id=1 showarea=true linesmooth=false /]` [⌊[table-chart id=1 linesmooth=false showpoint=false /]⌉⌊[table-chart id=1 linesmooth =false showpoint=false /]⌉[ `[table-chart id=1 linesmooth=false showpoint=false /]` [⌊[table-chart id=1 showarea=true showline=false showpoint=false /]⌉⌊[table-chart id=1 showarea=true showline=false showpoint=false /]⌉[ `[table-chart id=1 showarea=true showline=false showpoint=false /]` [⌊[table-chart id=1 low=0 high=8 /]⌉⌊[table-chart id=1 low=0 high=8 /]⌉[ `[table-chart id=1 low=0 high=8 /]` [⌊[table-chart id=1 chart=bar /]⌉⌊[table-chart id=1 chart=bar /]⌉[ `[table-chart id=1 chart=bar /]` [⌊[table-chart id=1 chart=pie /]⌉⌊[table-chart id=1 chart=pie /]⌉[ `[table-chart id=1 chart=pie /]` [⌊[table-chart id=1 chart=percent /]⌉⌊[table-chart id=1 chart=percent /]⌉[ `[table-chart id=1 chart=percent /]` ## Installation Prerequisite (install first): The [TablePress](https://wordpress.org/plugins/tablepress/) plugin 1. In `Plugins->Add New`, search for `tablepress chartist` 2. Click `Install Now` 3. When the plugin is installed, activate it. ## Reviews ![](https://secure.gravatar.com/avatar/5b4d74d4ea03c86fcad83a9b9a782696f49f7ed1237d1d88477dd03c8e4a9f31? s=60&d=retro&r=g) ### 󠀁[Nice](https://wordpress.org/support/topic/nice-4328/)󠁿 [pit24](https://profiles.wordpress.org/pit24/) May 24, 2022 Nice plugin ![](https://secure.gravatar.com/avatar/7a35a1cbc73d8cffc25647ea5cbdedcf18811168bcbf8da91ecdf8ea4414d9f8? s=60&d=retro&r=g) ### 󠀁[works well after patch (or downloading patched version)](https://wordpress.org/support/topic/works-well-after-patch-or-downloading-patched-version/)󠁿 [onefiniteplanet](https://profiles.wordpress.org/onefiniteplanet/) April 21, 2022 2 replies Simple and quite flexible way to save needing to import images from Excel or some other solution. Eliminates a complex process if data is updated. Note there is a patch needed, with the code in support section, but I am considering updating for my own use and will share patched version if anyone is interested in avoiding touching code. ![](https://secure.gravatar.com/avatar/2ee7027a38886968fca8c6b291e428660bf2326814ce900aa341cfc9bddccdd0? s=60&d=retro&r=g) ### 󠀁[Superb Plugin](https://wordpress.org/support/topic/superb-plugin-188/)󠁿 [adarshmadrecha](https://profiles.wordpress.org/adarshmadrecha/) March 27, 2018 1 reply Not very easy to use, but an excellent plugin. ![](https://secure.gravatar.com/avatar/a953395f5fd87d0d949bce602b268c0f34f944e1db25755e69eb5e0f3089ceb8? s=60&d=retro&r=g) ### 󠀁[Really useful Tablepress extension](https://wordpress.org/support/topic/really-useful-tablepress-extension/)󠁿 [karimun](https://profiles.wordpress.org/karimun/) August 24, 2017 Really useful Tablepress extension ![](https://secure.gravatar.com/avatar/82a76993de37152805e90e81f8361483155afaf3cb0ba8d1c475861845d651ca? s=60&d=retro&r=g) ### 󠀁[Works very well!](https://wordpress.org/support/topic/works-very-well-247/)󠁿 [jayjaytlk](https://profiles.wordpress.org/jayjaytlk/) February 28, 2017 Works very well! [ Read all 5 reviews ](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/) ## Contributors & Developers “TablePress Extension: Chartist” is open source software. The following people have contributed to this plugin. Contributors * [ silsha ](https://profiles.wordpress.org/silsha/) * [ Per Søderlind ](https://profiles.wordpress.org/pers/) “TablePress Extension: Chartist” has been translated into 2 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/charts-for-tablepress-chartist/contributors) for their contributions. [Translate “TablePress Extension: Chartist” into your language.](https://translate.wordpress.org/projects/wp-plugins/charts-for-tablepress-chartist) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/charts-for-tablepress-chartist/), check out the [SVN repository](https://plugins.svn.wordpress.org/charts-for-tablepress-chartist/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/charts-for-tablepress-chartist/) by [RSS](https://plugins.trac.wordpress.org/log/charts-for-tablepress-chartist/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 0.10 * Fixed error when opening the page in the backend. (Thanks to [andrewleonard](https://wordpress.org/support/topic/problems-with-chartist-plugin/)) #### 0.9 * Updated chartist.js to 0.11.0 #### 0.8 * Added support for pie charts with percent labels * Added animation for bar charts. * Added parameters `label_offset`, `chart_padding` and `donut_width`. #### 0.7 * 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](https://github.com/shaharhesse) #### 0.6 Switch to `[table-chart]` Shortcode. #### 0.5.1 * Revert to PHP json_encode(). #### 0.5 * **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](https://wordpress.org/plugins/tablepress-chartist/screenshots/). * Added support for `chart=pie` and `chart=percent`. #### 0.4 * Added support for bar chart: `chartist_chart=bar`. #### 0.3 * 0.3 Added support for CSS customizations. #### 0.2 * Added more optional parameters. #### 0.1 * Initial release ## Meta * Version **0.10.1** * Last updated **4 years ago** * Active installations **700+** * WordPress version ** 5.9 or higher ** * Tested up to **5.9.13** * Languages * [English (US)](https://wordpress.org/plugins/charts-for-tablepress-chartist/), [German](https://de.wordpress.org/plugins/charts-for-tablepress-chartist/), and [Russian](https://ru.wordpress.org/plugins/charts-for-tablepress-chartist/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/charts-for-tablepress-chartist) * Tags * [chart](https://wordpress.org/plugins/tags/chart/)[responsive](https://wordpress.org/plugins/tags/responsive/) [table](https://wordpress.org/plugins/tags/table/)[tablepress](https://wordpress.org/plugins/tags/tablepress/) * [Advanced View](https://wordpress.org/plugins/charts-for-tablepress-chartist/advanced/) ## Ratings 5 out of 5 stars. * [ 5 5-star reviews ](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/reviews/) ## Contributors * [ silsha ](https://profiles.wordpress.org/silsha/) * [ Per Søderlind ](https://profiles.wordpress.org/pers/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/charts-for-tablepress-chartist/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://sharethemeal.org/en/index.html)