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:
showline=true
(default: true)showarea=false
(default: false)low=0
(default: table low)high=10
(default: table high)donut_width=200
(default: false)linesmooth=true
(default: true)showpoint=true
(default: true)horizontal=true
(default: false)stack=true
(default: false)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:4chart=bar
(default: line) Alternatives: line, bar, pie, donut, percent or piepercent (mix of pie and percent).label_offset=100
(default: false)chart_padding=100
(default: false)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.
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; }
Prerequisite (install first): The TablePress plugin
Plugins->Add New
, search for tablepress chartist
Install Now
[table-chart id=1 /]
[table-chart id=1 showarea=true /]
[table-chart id=1 showarea=true linesmooth=false /]
[table-chart id=1 linesmooth=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 chart=bar /]
[table-chart id=1 chart=pie /]
[table-chart id=1 chart=percent /]
label_offset
, chart_padding
and donut_width
.horizontal=true
)stack=true
)Switch to [table-chart]
Shortcode.
chartist_
), new optional parameters are: showline, showarea, low, high, linesmooth, showpoint and aspect_ratio. See examples in screenshots.chart=pie
and chart=percent
.chartist_chart=bar
.