Combine Clustered and Layered column chart?

[pmatatias]

First of all, thanks for the awesome chart

Question

Is it possible to combine Clustered and Layered column chart?

I know we can combine Clustered and Stacked , but I want the second series also start from zero, not like Stacked the next series will start from the end of first value.

• for example, I have data like:

  var data = [{
  "category": "YTD",
  "targetA": 3.5,
  "actualA": 4.2
  }, {
  "category": "MTD",
  "targetA": 1.7,
  "actualA": 3.1
  }, {
  "category": "WTD",
  "targetA": 2.8,
  "actualA": 2.9
  }];

  the chart will be:
  

• What I want to achive is when i have more data in one category :

  var data = [{
  "category": "YTD",
  "targetA": 3.5,
  "actualA": 4.2,
  "targetB": 3.5,
  "actualB": 4.2
  }, {
  "category": "MTD",
  "targetA": 1.7,
  "actualA": 3.1,
  "targetB": 1.7,
  "actualB": 3.1
  }, {
  "category": "WTD",
  "targetA": 2.8,
  "actualA": 2.9,
  "targetB": 2.8,
  "actualB": 2.9
  }];

  result: all the series was Stacked in the center. is it posibble to make it clustered ?

I expect actualB and targetB are Layered like Series A

demo codepen : https://codepen.io/pmatatias/pen/VwqYPQy?editors=0010\

Thank in advance 😄

[zeroin]

Do you mean something like this? https://codepen.io/team/amcharts/pen/abPzyYK/6030ccca80f791f0363c4c4ad2a10edd?editors=0010

[pmatatias]

Do you mean something like this? https://codepen.io/team/amcharts/pen/abPzyYK/6030ccca80f791f0363c4c4ad2a10edd?editors=0010 in my codepen before, targetB and actualB was separated between Series A. I want to group it like below. Is it possible?

[zeroin]

In this case I would set target value to the target-actual value and make target stack on actual.

[pmatatias]

yes, at first, I thought to use Stacked, but in some cases, the actual value is bigger than the target. which means: target-actual is negative, and the target should be rendered lower than the actual column

that's why I'm looking for a method to draw a column chart from below.

[zeroin]

I think the only way to achieve this would be to add another xAxis (you can make it invisible) and add two of the series to this separate x axis.

[pmatatias]

@zeroin Thank you for your suggestions. Maybe I'll try it later.

[pmatatias]

Currently, I just try to explore another method. and I end up with Grouped and Sorted Columns

after some modification, I can get this result.

Code Pen : https://codepen.io/pmatatias/pen/JjwoaQw?editors=0011

I'm not sure this is the best approach. I'll try your suggestion by adding another xAxis later.

again, thank you for your help. 😄