2d bar overlap bars of different series

[r.timmermans]

Hello, first of all i like  FusionCharts a lot! Nice work here!

I have 1 question though, is it possible to overlap the bars of data series? I have added screens to show you what i mean. The situation on img 2 is what i am looking for.
 

The code i am using now is as follow:

vergelijkingChart.render();

	    var kolomVergelijkChart = new FusionCharts({
	        "type": "mscolumn2d",
	        "renderAt": "mscol2d",
	        "width": "500",
	        "height": "500",
	        "dataFormat": "json",
	        "plotBorderDashGap": "100",
	        "dataSource": {
	          "chart": {
			      "caption": "Naam Chart",
			      "xAxisname": "Onderdeel",
			      "yAxisName": "Score",
			      "paletteColors": "#017e8d,#e48f24",
			      "baseFontColor": "#333333",
			      "baseFont": "Helvetica Neue,Arial",
			      "captionFontSize": "14",
			      "subcaptionFontSize": "14",
			      "showBorder": "0",
			      "bgColor": "#ffffff",
			      "showShadow": "0",
			      "showLegend": "0",
			      "canvasBgColor": "#ffffff",
			      "canvasBorderAlpha": "0",
			      "usePlotGradientColor": "0",
			      "showplotborder": "0",
			      "valueFontColor": "#ffffff",
			      "placeValuesInside": "1",
			      "showHoverEffect": "1",
			      "rotateValues": "0"
			   },
			   "categories": [
			      {
			         "category": [
			            {
			               "label": "D <br> 21-08-13 <br> 0-A"
			            },
			            {
			               "label": "B <br> 03-12-13 <br> 1-B"
			            },
			            {
			               "label": "B <br> 19-03-14 <br> 2-B"
			            },
			            {
			               "label": "B <br> 04-07-14 <br> 3-C"
			            }
			         ]
			      }
			   ],
			   "dataset": [
			      {
			         "seriesname": "Waarde 1",
			         "data": [
			            {
			               "value": "26"
			            },
			            {
			               "value": "45"
			            },
			            {
			               "value": "49"
			            },
			            {
			               "value": "53"
			            }
			         ]
			      },
			      {
			         "seriesname": "Waarde 2",
			         "data": [
			            {
			               "value": "40"
			            },
			            {
			               "value": "43"
			            },
			            {
			               "value": "47"
			            },
			            {
			               "value": "50"
			            }
			         ]
			      }
			   ]
			}
	    });

	    kolomVergelijkChart.render();

Edited May 4, 2015 by r.timmermans

[Moonmi Sonowal]

Hi,

 

Natively, the kind of your requirement is not possible. However, you can make use of rectangle annotations to create the overlapping columns. 

 

Please refer the demo fiddle for implementation: http://jsfiddle.net/moonmi/L72kyuh0/

 

Also, do make use of "plotSpacePercent" attribute in the chart attributes to make space between columns for the rectangle annotations.

 

Ref.

http://docs.fusioncharts.com/tutorial-annotations-introduction.html

http://docs.fusioncharts.com/tutorial-attr-column2d.html

 

Hope this will resolve your issue.