In this article
Guide on how to customize charts: define series, break down by categories, add categories, and adjust axis settings. Example code included.
To create a new chart, drag the chart widget onto the canvas, and then select "edit" to view its properties.
In the Setup section, you define the desired chart type and some general properties.
For chart type, you can choose between Pie, Bars, Area, or Lines. Note that pie charts do not permit multiple series and have a more limited set of additional properties. If you select bar, area, or line chart, you can also set the orientation.
Overall this section also enables you to:
-
Determine the chart type
Determine the desired palette (color scheme) for the chart
Determine the visibility and position of the legend
Decide whether to hide empty series and/or categories
Decide on whether to use Significance Testing
Example setup of a chart widget
Defining the Series
The series represents the statistical value to be measured, such as the frequency count of a question or the average satisfaction score. Pie charts offer a single series, while line, area, and bar charts can have multiple series defined. All charts must have at least one series defined.
In each series, you can define the expression to use for the series by clicking the Expression builder icon.
For bar, area, and line chart types, you can set the visualization of each separate series to a bar, line, or area. Additional properties allow you to control how the percentage is calculated and specify the number formatter to be used on the series.
Defining the series in a chart
Breaking Down a Series by Categories
The Visualisation drop-down determines how the series appear when categorized. Choose Standard for no categorization, or select one of the other options for categorization.
Clustered - The breakdown categories are shown side by side.
Stacked - The breakdown categories are shown stacked on top of each other.
Stacked 100% - The breakdown categories are stacked on top of each other so that their proportions equal 100%.
If you select any of these options, a dialog will appear that lets you choose the variable to use as the breakdown variable for the series.
Below, you'll find examples of the output produced by these breakdown visualizations.
Example visualizations of a chart widget
Adding a Category
To display the value of this series across different categories, like age groups or time periods, we can use the variable selector to pick the desired question and set the category number format. For instance, we could show the value by month for the last 12 months.
In the simple example below we have a series (count of our NPS questions) broken down by the categories of the NPS question (Detractors, Passives and Promoters)
A column chart with the series broken down by categories
Using Dates for Category Values
Choose the periods you want to display on the category axis, such as month, day, or year.
Click on the calendar
icons for the start and end dates to set the overall time period to be displayed on the axis.
You can set the start or end date to display all available data, a rolling time period (such as the last 3 months), or fix it to a specific date.
Displaying the base value on categories
To provide additional information on each category count, you can display a base value for each category. Click on the plus + icon located next to the Base Values section in the Category area to do this. The expression will display the category count by default, but you can modify it.
Additionally, you can set the number format of the base value.
Axis settings
To adjust the visibility and appearance of the X, Y, and secondary Y axis settings, expand the relevant section and make the necessary modifications.
Setting up the axes
You can customize each axis with the following options:
Adjust the axis label and label size.
Set the maximum and minimum values of the axis.
Specify the number format for the axis values.
Choose the orientation for the tick labels.
Decide whether to display or hide the tick marks or the axis line.
Setting up the axes for the X-axis
Setting up the axes for the Primary Y-axis
The Secondary Y-axis is located on the right side of the chart and is switched off by default.
To display it, click the view icon next to Secondary Y-Axis. Then in the "Series" section below, toggle the option to Use Secondary Axis for the series that you want to display on the secondary axis.
Selecting to use the secondary axis for this series
Applying a Moving Average
Studio allows you to apply a moving average directly within the chart widget interface.
In the chart widget, click the Edit icon to modify the widget properties.
Navigate to the Category section.
Select the category to which you want to apply the moving average.
Look for the Moving Average option and enable it.
Specify the number of periods (e.g., 3, 5, 7) over which the average should be calculated.
This functionality provides a clearer view of trends by averaging data points over the specified number of periods.
To learn more about using CDL with charts, start with: Single Series Charts
For details of the properties and settings, refer to widget chart in the CDL Reference Guide.