Chart Element
The Chart Element turns numbers into a chart: bar, horizontal bar, line, pie, doughnut, polar area or radar. You enter the data in a simple table in the Builder, and the chart is drawn in the visitor’s browser, scaling with the width of its column.
Use it to show figures that are easier to compare as a picture than as a list, such as sales per quarter, a share of the market or the results of a survey. Legend, axis labels, tooltips and colors can all be set in the element.
In this article: How To Use · Element Options · Chart Value Options · Tips · Related Elements · Example
How To Use The Chart Element
Add the Chart Element to any column. The Builder opens a table where you build the data: + Add Data Set adds a row (one series, with its label and colors) and + Add Value Column adds a column (one value per series, with its label on the X axis). Each row is saved as a Chart Value with its Label, Value, Background Color and Border Color.
In the options choose the Chart Type, an optional Title and the Legend Position. For bar, horizontal bar and line charts, X Axis Label and Y Axis Label name the axes. Show Tooltips displays the exact value when the visitor points at a bar, slice or point.
Line charts have their own options: Border Type (smooth, non smooth or stepped lines), Chart Fill for the area below or above the line, and the Point Style, Point Size and point colors. Pie, doughnut and polar area charts, and bar charts with a single data set, color each value separately instead of each data set.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Chart. Change them there to style every Chart at once.
General
| Heading | Description |
|---|---|
| Title | The chart title utilizes all the H4 typography settings in Global Options except for top and bottom margins. |
| Chart Type | Select chart type. |
| Legend Position | Set chart legend position. Note that on mobile devices legend will be positioned below the chart when left or right position is used. |
| X Axis Label | Set X axis label. |
| Y Axis Label | Set Y axis label. |
| Show Tooltips | Choose whether tooltips should be displayed on hover. If your chart is in a column and the column has a hover type or link, tooltips are disabled. |
| Border Type | Select border type. |
| Chart Fill | Choose how line chart should be filled. |
| Point Style | Choose point style for line charts. |
| Point Size | Choose point size for line charts. |
| Point Background Color | Choose point background color for line charts. |
| Point Border Color | Choose point border color for line charts. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Chart Value Options
Each Chart Value is one data set: a label, its values separated by “|” (one per value column), and its background and border color.
General
| Heading | Description |
|---|---|
| Label | Add a label for chart function. |
| Value | Enter values for axis. NOTE: Separate values with “|”. |
| Background Color | Controls the background color. |
| Border Color | Controls the border color. |
Tips
- A chart is drawn as an image-like canvas, so screen readers cannot read the numbers. Add a short sentence or a table with the key figures next to the chart.
- Choose the type by the question: bars for comparing amounts, lines for changes over time, pie or doughnut for parts of a whole with only a few slices.
- Tooltips are switched off automatically when the chart sits in a column that has a link or a hover effect.
- On phones a legend set to Left or Right moves below the chart to leave room for the chart itself.
- Use colors with enough contrast between neighboring data sets or slices, and do not rely on color alone; the legend labels should say what each color means.