By default, the series in a stacked chart will be stacked together if they have the same type (bar, line, or area) and belong to the same y-axis (y1 or y2). This makes sense for most data sets, but there are cases where more precise control is needed. To support this, the JET charts support the series[].stackCategory attribute, which will create new stacks for series with different stackCategory values.

 

This is useful in combination charts, where one might want to stack the bar series, but not the lines:

chartCombinationStacking.png

Here's the series array for this chart:

var series = [
  {name : "Cloud Sales", type: 'bar', items : [110, 210, 250, 355]},
  {name : "On Premise Sales", type: 'bar', items : [40, 35, 40, 25]},
  {name : "Cloud Win Rate", assignedToY2: 'on', type: 'line', stackCategory: "Cloud Win Rate", items : [78, 80, 85, 90]},
  {name : "On Premise Win Rate", assignedToY2: 'on', type: 'line', stackCategory: "On Premise Win Rate", items : [90,  76, 60, 65]}
];

 

This feature can also be used to provide different perspectives on the data. In our stack categories demo, we show a chart with sales across products in different regions. By using stacking and stack categories, a chart showing the sales of products in individual regions can be updated to show total sales or total sales by region:

 

chartStackCategory.gif

 

The stack categories demo also leverages associated views highlighting and custom legend sections. To learn more about these features, see:

Associated Views: Cross Component Interactivity for Data Visualizations

How to Create Colorful Bar Charts