Charts builds bar, line, pie, doughnut, radar and polar area charts from data you type in, from dynamic fields or from a Google Sheet. Visitors can hover over the chart to see each value. Set the colours, labels and legend to match your site.
Line, bar, horizontal bar, doughnut, pie, radar and polar area charts for a hotel, a bakery, a shop, a design studio, a café and a gym. Hover over a point, bar or slice to see its value, and click a legend item to hide that series.
Chart Type: Line with Enable Multiple Datasets on. This year is filled; last year is a plain line for comparison.
Chart Type: Bar with two datasets, one per shop, and grid lines hidden.
Chart Type: Horizontal Bar with a colour per product. Hide Legend: Yes.
Chart Type: Doughnut, one colour per source, legend on the right.
Chart Type: Pie with Hide Borders on, from 312 customer survey answers.
Chart Type: Radar with two datasets: a member's first assessment and the same test 12 weeks later.
Chart Type: Polar Area. Each segment grows with its value, so the busiest classes stand out.
Pick a type, add your data, then style it.
Drop Charts onto your page and pick bar, horizontal bar, line, pie, doughnut, radar or polar area.
Type in labels, values and colours, add several datasets, or connect a Google Sheet.
Set the title, axis labels, fonts, colours, legend position and height.
Clear charts for reports, pricing pages and dashboards.
Bar, horizontal bar, line, pie, doughnut, radar and polar area.
Visitors hover over a bar, point or slice to see its label and value.
Paste a Google Sheet URL. The first column becomes the labels and each other column becomes a dataset.
Sheet data is cached for the number of minutes you set, 15 by default. If the sheet cannot be read, the chart uses its own data.
Compare several series in one chart, each with its own label, colours and optional line fill.
Labels, values, titles and datasets accept dynamic data, so charts can come from custom fields.
Give every bar or slice its own colour, and set line and background colours for line charts.
Add a chart title and X and Y axis labels, with their own font size and colour.
Place the legend on any side or hide it, and hide borders, grid lines or the axes.
Anywhere numbers are easier to understand as a picture.
Show results, growth and before and after numbers.
Show figures from a Google Sheet that you update in one place.
Turn poll answers into a pie or bar chart.
Compare features or scores with a radar chart.
Show budgets, spending or returns over time with a line chart.
Explain data in lessons and course material.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Graph | ||
| Chart Type | Bar, line, doughnut, pie, horizontal bar, radar or polar area. | Bar |
| Chart Title | Title above the chart. | Favorite Fruit |
| Y / X Axis Label | Labels for the two axes. | Number of people / Fruits |
| Use Google Sheet Data | Load the data from a Google Sheet. | Off |
| Sheet URL | The address of the sheet. | — |
| Sheet Cache | How long to keep sheet data, in minutes. | 15 |
| Enable Multiple Datasets | Switch from single data points to several datasets. | Off |
| Data Points | Label, value, dynamic value and colour for each point. | 3 sample points |
| X-Axis Labels | Comma separated labels for multiple datasets. | — |
| Datasets | Label, comma separated values, background and border colour, and fill for each dataset. | — |
| Chart Style | ||
| Line Chart Background Color | Fill colour under a line chart. | #FFAA718A |
| Line Color | Colour of the line. | #4E4E4E |
| Title Font Size / Color | Size and colour of the chart title. | 20 / black |
| Axis Font Size / Color | Size and colour of the axis text. | 19 / black |
| Legend Location | Bottom, top, left or right. | — |
| Hide Legend | Yes or no. | — |
| Hide Borders / Grid Lines / Axis | Remove parts of the chart for a cleaner look. | — |
| Size | ||
| Height | Height of the chart. | 600 |
Put the labels in the first column and one dataset in each column after it. The first row is used for the dataset names.
The chart reads the sheet again once the cache time has passed. The default is 15 minutes, and you can change it.
Yes. Turn on Enable Multiple Datasets, enter the X axis labels, then add a dataset for each series with comma separated values.
Yes. Each data point has a Value (Dynamic Field) option, and the labels, titles and datasets accept dynamic data too.
Yes. This page has seven charts, each with its own type, data and style settings.
Charts is included with Phox Elements, along with 140+ other premium elements for Breakdance.