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

Farhan Noor

Table Sorter

No more old static tables, make your HTML tables sortable.

NSquared

pwtyler

TylerDigital

ACF: TablePress

ACF field type to select a TablePress table

nomadjimbob

inDiv for TablePress

Custom Extension for TablePress to automatically wrap the table in a DIV element.

Per Søderlind

silsha

<p>Using <a href="http://gionkunz.github.io/chartist-js/" rel="nofollow ugc">Chartist.js</a>, this <a href="https://wordpress.org/plugins/tablepress/" rel="ugc">TablePress</a> Extension creates a responsive chart based on the data in a TablePress table.</p>
<h4>Use</h4>
<p>Add the Shortcode <code>[table-chart id=123 /]</code> to a post or page to create a chart from the TablePress table 123.</p>
<p>Optional parameters:</p>
<ul>
<li>Show/hide chart line: <code>showline=true</code> (default: true)</li>
<li>Show/hide show chart area: <code>showarea=false</code> (default: false)</li>
<li>Set chart y low: <code>low=0</code> (default: table low)</li>
<li>Set chart y high: <code>high=10</code> (default: table high)</li>
<li>Set line with of the donut chart: <code>donut_width=200</code> (default: false)</li>
<li>Enable/disable smooth line: <code>linesmooth=true</code> (default: true)</li>
<li>Enable/disable line points: <code>showpoint=true</code> (default: true)</li>
<li>Enable/disable horizontal bars: <code>horizontal=true</code> (default: false)</li>
<li>Enable/disable stacked bars: <code>stack=true</code> (default: false)</li>
<li>Set chart aspect ratio: <code>aspect_ratio=3:4</code> (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</li>
<li>Select chart type: <code>chart=bar</code> (default: line) Alternatives: line, bar, pie, donut, percent or piepercent (mix of pie and percent).</li>
<li>Set label offset: <code>label_offset=100</code> (default: false)</li>
<li>Set chart padding: <code>chart_padding=100</code> (default: false)</li>
<li>Use animations (not available for all chart types): <code>animation=buildup</code> (default: false)</li>
</ul>
<p>If the “Table Head Row” option is enabled for the table, the Extension will use the head row data for the chart labels.<br />
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.</p>
<h4>CSS customizations</h4>
<p>If you’d like to overide <a href="http://gionkunz.github.io/chartist-js/getting-started.html#the-sass-way" rel="nofollow ugc">the default style</a>, you can add a <code>tablepress-chartist-custom.css</code> in <code>wp-content</code> directory. It will be loaded after the Extension’s default CSS file <code>libdist/chartist.min.css</code>.</p>
<p><strong>Example:</strong></p>
<pre><code>/**
 * 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;
}
</code></pre>


Alternatives to TablePress Extension: Chartist

Top alternatives