Helpful chart settings

Charts

Changing your chart type in Chartio can dramatically change and enhance your charts. To do this, click the ellipse in the upper right hand corner of your chart and click Edit Settings.

Click Edit Settings by hovering over a chart

Horizontal Bar charts

Bar charts are helpful when comparing data across different categories. When dividing your data by ranked or non-continuous groups (basically things other than time) it can be helpful to switch to a “horizontal” bar chart. It’s more natural for Western readers (we’re used to reading lines of different lengths aligned to a left edge), and especially helpful when you have longer labels on your bars.

Make a bar chart horizontal

Rotating labels

Another way to work with long label names is to use angled or rotated labels. This is great for situations when you can’t (or don’t want to) swap the axes of your chart, or when you have long labels on both axes. Angled labels will get harder to read the more they are rotated, so only angle them as much as is needed.

Rotate labels on a bar chart

Stacked and unstacked Bar charts

  • Stacked Bar charts work best when you want to focus on overall total values, but still want the components to be visible.

    Stacked bar charts

  • Unstacked Bar charts allow for an equal comparison of each component.

    Unstacked bar charts

Stacked Area charts

Area charts can be stacked or unstacked in Chartio, and when unstacked, information can be hidden behind other layers. To make the data more visible, unclick Stacked (under the General tab) and click Half opacity (under the Series tab).

Unstacked area charts

Percentage scale

Charts with a percentage axis are sometimes called 100% stacked charts and are useful for displaying ratios without focusing on individual values.

Percentage scale to make 100% stacked charts

Logarithmic scale

There may be an instance on a bar chart or bar line chart where you want the y-axis to be displayed with a logarithmic scale.

You can enable this by going to the chart settings and checking the box beside ‘Logarithmic scale’ and clicking ‘Done’.

Check Logarithmic scale in Settings

If the option to select the logarithmic scale option is grayed out, you will need to unselect the “Stacked” option under the general chart settings tab and you will then be able to use the logarithmic scale.

Donut charts

Pie charts are best used when focusing on static ratios, but you can add more information to the chart by switching it to a “Donut” and adding the total value in the center.

Donuts charts > pie chartsTable chart font

If your dashboards are displayed on monitors or are often printed, you may want to make the the font larger within your Table charts to make them easier to read. Both the title and the body font sizes can be changed to a value between 8 - 64.

Table chart settings - Font sizes

Note: Chartio dashboards are responsive, charts will also change size depending on browser width.

Annotations

Add a note at a specific x or y-axis value in your chart to provide your teammates with some context for the data.

Axis notes

Y-axis annotations can be useful for setting a target line.

y-axis annotations

Add an annotation

From the dashboard, hover over your chart and click the gear icon to open its context menu. Select Edit Settings.

Edit settings

Switch to the Annotation tab, and click +Add New Annotation.

Choose which axis you’d like to add the annotation to, and enter the axis value where the annotation should be placed. Enter your note in the Label text field.

Uncheck Show annotation labels on chart to display annotations only on hover, in the tooltip.

Show annotation labels

Unrounded tooltip values

By default, Chartio rounds values in the hover tooltip to two digits. If you’d like to display the unrounded value instead, simply open the chart’s settings menu and uncheck Round tooltip values in the General tab.

In Chart Settings, uncheck Round tooltip values

Our chart now displays the raw values on hover.

Unrounded values final result

Axis Label Format

Customize the format of the axis labels on your chart.

To edit, navigate to Chart Settings > Axis tab. Select the desired format from the Label format dropdown.

You can select the format for your label in the settings

Datetime labels

Choose from the following formats:

  • Default (ex. Jan 1, 2020)
  • ISO-8601 (ex. 2020-01-01)

Numeric labels

Choose from the following formats:

  • 1K (default)
  • 1000%
  • $1,000.00
  • 1,000.00
  • 1000.00
  • 1 000,00
  • 1000,00

Note: if your chart values are integers, labels will be integers as well.

X-axis Date Labels

If Chartio isn’t recognizing your dates as a time series, it won’t know that it can group the date values to display the series better.

Read on if your x-axis looks like this:

Does your x-axis look like this?

When it should look like this:

Your x-axis should look like this

This could be happening for a few different reasons. Here are the most common solutions.

Solution

Try zero-filling the data.

This is the most common fix. If there are dates missing from your date series, zero-fill will fill in the missing dates so Chartio can recognize the dates as a series. Add a Zero Fill Data step in the Data Pipeline.

Zero-fill the data

Sort your dates.

If your dates are out of order, Chartio can’t group them as a series. Try sorting your dates. Click the date column name to open its settings pop-up, and select Ascending from the Sort dropdown.

Sort your dates

Look for discrepancies in your data.

It’s possible there is a null value in your dates, or your dates are not formatted correctly. View the raw data being returned to look for any discrepancies. If applicable, filter out for null dates or format your dates in SQL Mode according to your database’s syntax. To view raw data, click the View Data button in the Data Pipeline.

look for discrepancies in your data

Ensure correct date format in SQL Mode.

To recognize dates as dates, Chartio requires that they are formatted in a certain way. For more information, please see our documentation on date formatting in charts.


Related Charts Help Articles

See more