Wing ChartBar Stacked

VIEW MORE WING CHARTS
VIEW HTML
EDIT ON CODEPEN
A wing chart (tornado chart) is a special column (bar) chart where two data columns (bars) opposite to each other. To create a bar-type wing chart, the <Bar2DWingChart> and <Bar2DWingSeries> elements must be set in Layout, and to create a column-type wing chart, the <Column2DWingChart> and <Column2DWingSeries> elements must be set in Layout.

In this example, a <Bar2DWingSeries> element is set within a <Bar2DWingChart> element. The xField (values increase to the right) and xFieldOpp (values increase to the left) attributes are set to the name of the field where the value is stored.
<Bar2DWingChart showDataTips="true" type="stacked" paddingTop="10">
...
<series>
<Bar2DWingSeries xField="Coffee" xFieldOpp="Coffee2" labelPosition="inside" displayName="Coffee" showValueLabels="[4,5]" showValueLabelsOpp="[4,5]" color="#ffffff">
...
</Bar2DWingSeries>
<Bar2DWingSeries xField="Donuts" xFieldOpp="Donuts2" labelPosition="inside" displayName="Donuts" showValueLabels="[4,5]" showValueLabelsOpp="[4,5]" color="#ffffff">
...
</Bar2DWingSeries>
</series>
</Bar2DWingChart>