JavaScript Wing Chart Bar Stacked

VIEW MORE CHARTS
SAVE
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 using KoolChart's JavaScript charting library, 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 JavaScript chart 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>