You can set minus values in bar chart and compare two categories of data. In the above chart, two categories ( Man, Woman ) are compared efficiently by setting minus values to the data of the Woman category.

  <Bar2DSeries labelPosition="inside" yField="Man" displayName="Man" />
  <Bar2DSeries labelPosition="inside" yField="Woman" displayName="Woman" insideLabelJsFunction="seriesLabelFunc" />

  <Axis2DRenderer axis="{vAxis}" placement="left" />
  <Axis2DRenderer axis="{vAxis}" placement="right" />
function seriesLabelFunc(seriesId, index, data, values) {
  return  toPositive(values[0]);

function toPositive(value) {
  return  insertComma(Math.abs(value));

function insertComma(n) {
  var reg = /(^[+-]?\d+)(\d{3})/;
  n += "";
  while (reg.test(n))
    n = n.replace(reg, '$1' + "," + '$2');
  return  n;


axis The axis attribute determines which Axis object will be used to render. The id assigned to <horizontalAxis> or <verticalAxis> must be the value of this attribute.
placement The placement attribute determines the location of the axis. The valid values for the vertical axis are "left" and "right", and those for the horizontal axis are "bottom" and "top". The default value of the first axis is "left" ( bottom ), and the second axis is automatically located at the opposite of the first axis in Cartesian charts.

© 2017 KoolChart. All rights reserved.