In this article
Demonstration of various chart types categorizing a single series, options for ungrouped, stacked, or stacked to 100%. Layout controls bar/column chart type.
The values of a series can be separated into categories. For instance, you can view the results of the LTR question categorized. The categorization can be displayed as ungrouped, stacked, or stacked to 100%.
A demonstration of each chart type using a single series separated by category is provided.
Note
The chart type for bar/column is not determined by specific chart types but is controlled by the layout property.
Recommend by Quarter (Clustered) Example of a Recommend by Quarter (Clustered) chart View CDL widget chart#chartWidget_7 { label: "Recommend by Quarter (Clustered)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter
chart bar { stacked: false mode: clustered dataLabel: percent } series { value: count(relationship:recommend.1) percent: true breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } axis category#categoryAxis { } axis primary #primaryAxis { minValue: 0 tickLine: true } axis secondary #secondaryAxis{ hide: true } } | Recommend by Quarter (Area Clustered) Example of a Recommend by Quarter (Area Clustered) chart View CDL widget chart #copy_of_chartWidget_7 { label: "Recommend by Quarter (Area Clustered)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter chart area{ stacked: false mode: clustered dataLabel: value } series { value: count(relationship:recommend.1) breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } } | Recommend by Quarter (Line Clustered) Example of a Recommend by Quarter (Line Clustered) chart View CDL widget chart#copy_of_copy_of_chartWidget_7 { label: "Recommend by Quarter (Line Clustered)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter chart line { stacked: false mode: clustered dataLabel: percent } series { value: count(relationship:recommend.1) percent: true } breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } } |
Recommend by Quarter (Stacked) Example of a Recommend by Quarter (Stacked) chart View CDL widget chart#chartWidget_8 { label: "Recommend by Quarter (Stacked)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter series { value: count(relationship:recommend.1) chart bar { mode: stacked dataLabel: value } breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } } | Recommend by Quarter (Area Stacked) Example of a Recommend by Quarter (Area Stacked) chart View CDL widget chart #copy_of_chartWidget_8 { label: "Recommend by Quarter (Area Stacked)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter series { value: count(relationship:recommend.1) chart area { mode: stacked dataLabel: value } breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } } | Recommend by Quarter (Line Stacked) Example of a Recommend by Quarter (Line Stacked) chart View CDL widget chart#copy_of_copy_of_chartWidget_8 { label: "Recommend by Quarter (Line Stacked)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter series { value: count(relationship:recommend.1) chart line { mode: stacked dataLabel: data } breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } } |
Recommend by Quarter (100% Stacked) ![]() Example of a Recommend by Quarter (100% Stacked) chart View CDL widget chart#chartWidget_9 { label: "Recommend by Quarter (100% Stacked)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter series { value: count(relationship:recommend.1) chart bar { mode: stacked100Percent dataLabel: percent } breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } axis category#categoryAxis { } axis primary #primaryAxis { } } | Recommend by Quarter (Area 100% Stacked) Example of a Recommend by Quarter (Area 100% Stacked) chart View CDL widget chart#copy_of_chartWidget_9 { label: "Recommend by Quarter (Area 100% Stacked)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter series { value: count(relationship:recommend.1) chart area { mode: stacked100Percent dataLabel: percent } breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } } | Recommend by Quarter (Line 100% Stacked) ![]() Example of a Recommend by Quarter (Line 100% Stacked) chart View CDL widget chart#copy_of_copy_of_chartWidget_9 { label: "Recommend by Quarter (Line 100% Stacked)" palette: "#82D854","#FFBD5B", "#FA5263","#0000FF" size: small legend: bottomCenter series { value: count(relationship:recommend.1) chart line { mode: stacked100Percent dataLabel: percent } breakdownBy cut { value: relationship:NPSCategory } } category date { value: relationship:interview_start breakdownBy: calendarQuarter format: dateFormat } } |
.png)
.png)