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)
- Enable/disable smooth line:
linesmooth=true
(default: true)
- Enable/disable line points:
showpoint=true
(default: true)
- 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, or percent.
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:
`
/**
.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
- In
Plugins->Add New
, search for tablepress chartist
- Click
Install Now
- When the plugin is installed, activate it.