Chart Component

Charts can be a great tool for summarizing your data visually. On Akuko, you have a choice of 8 chart options: Area, Bar, Column, Line, Pie, Polar, Radar and Scatter charts. For the Area, Bar and Column charts, there is also an option to visualize data as stacked charts.

Creating charts

Create a chart component by clicking the plus (+) icon and selecting the chart icon (third from the top). An empty bar chart will be displayed by default.

Populate/Update chart

Populate the chart by clicking the ellipses and selecting the pencil icon. A pop-up menu appears on the right similar to other components of a post, with additional menu options specific to charts.

Add a chart title

You can create a title and a caption for your chart in the Title tab.
You can add a variable from the data to your title by wrapping the variable column name in curly brackets ( { } ). The variable will change according to the filters applied to the variable column name. For instance, below is a bar chart showing GDP by country. The bar chart has a filter on the variable column _country_name, which is the column containing all country names. The title should be {_country_name} by Ladder score and GDP per capita to ensure the country’s name appears in the title according to their filter selection.

Add a chart source

The Source option allows you to select the data source used to populate the chart. A data source is essential for the chart to display anything. Otherwise, without a data source, the chart will have the loading animation constantly. To learn more about data sources, reference our help documentation.

Sorting data

Use the Sort menu option to order your chart data fields either in an ascending or descending manner. Use the Sort Field dropdown to select the column you would like to sort.

Set the chart type

Under the Chart tab, select the chart type you wish to create, the categories, and chart series. After selecting the desired chart under Type, select the column to use as the X-axis from the Categories drop-down menu. This column will primarily have categorical data. However, this column could also be a date or time column.
Pick at a series column with which your data will be categorized by. This will primarily be on the X-axis, or be what defines the slices of a pie chart for instance. Select the Add series button to add a series. This action will add a series named “series” by default. Once you select a column from the Property dropdown, the series name changes to that particular column’s name.
In this case, our series is named “ladder_score”, since we selected the ladder_score column as the series. You may add as many series as is required for your chart.
To further categorize your data, you can use the group by option that will split your series into subcategories. For instance, in the example below, the healthcare workers are not only distributed across administrative regions but also subcategorized into genders.
To achieve this, under the group by section, add the column with which you would like to subcategorize your data. Once the group by column is selected the distinct values of that column will appear below and allow you to color your different subcategories accordingly.
In cases where the subcategories may be numerous or cause the chart to seem difficult to read, a stacked option may be a better alternative, like in the one below.

Add a filter

Filters allow the user to display a portion of the points on a chart based on the value(s) selected in the filter. Add multiple filters to a chart to enable the user to filter down to a particular set of points or a period that they want.
To expose the filter you added to your chart, check the Expose box. A filter should appear above the chart you are working on.

Change the chart’s layout

You can use the Layout tab, to format your chart to your liking. Use the Height scroll bar to adjust the vertical height of your chart. The height value runs from 20 to 1000. An ideal height would be 450, but this all depends on how your chart appears.
Padding is the white space between your chart and the rest of the elements of the chart component like the title, filters and legend. To adjust these spaces, use the Padding Top, Right, Bottom and Left scrollbars or numeric values to adjust according to your needs. Usually, the default values look appropriate on most charts.
Use the Hide Axis Labels and Legend sliders to turn on or off the axis labels and legends, respectively.
With axis label and legend enabled
With axis labels and legend disables
You can use the Axis Min and Max to set the values where the Y-axis begins and ends, respectively. Be careful when adjusting these Y-axis values as some of the points on the graph may disappear from view if done incorrectly. This setting can be used to give the users some perspective. For example, charts that show the lowest value touching the X axis can be misleading leading views to believe the value is zero, as is a default for many charts, as shown in the next two images.
The axis scale is left untouched
Axis scale is set to min = 0 and max = 150