How to combine two series into one value-axis in Charts of devExtreme library?

Question

I'm trying to display two series in one chart. The problem is - the series are separated. I want them value fields to be started on 0. Here's the template:

<dx-chart id="chart" [dataSource]="dataSource" [rotated]="true">
  <dxi-series valueField="Count" axis="countAxis"> </dxi-series>
  <dxi-series valueField="Sum" axis="sumAxis"> </dxi-series>
  
  <dxo-common-series-settings
      argumentField="Name"
      type="stackedbar"
    ></dxo-common-series-settings>
    <dxo-legend [visible]="false"></dxo-legend>
</dx-chart>

The dataSource is returned in service from the array:

const data = [
    {
      Name: 'First test',
      Count: -1,
      Sum: 12800,
    },
    {
      Name: 'Second test',
      Count: -1,
      Sum: 25000,
    },
    {
      Name: 'Third test',
      Count: -1,
      Sum: 16500,
    },
    {
      Name: 'Fourth test',
      Count: -3,
      Sum: 10750,
    },
    {
      Name: 'Fifth test',
      Count: -45,
      Sum: 107409,
    },
  ];

For now the result is: How can I combine these two series?

Answer 1

The tag that needed is called dxi-value-axis and its parameter is called synchronizedValue. (By the way, there's another similar tag called dxo-value-axis. Comment below the differences, if you know, please). So basically you have to give your series "axis" parameter and refer inside dxi-value-axis to it as name parameter and put the tag inside dx-chart tag:

<dxi-value-axis
      [synchronizedValue]="0"
      name="yourAxisNameInsideSeries"
      [visualRange]="[-45, 0]"
      [visible]="true"
    ></dxi-value-axis>
    <dxi-value-axis
      [synchronizedValue]="0"
      name="yourAxisNameInsideSeries"
      [visualRange]="[0, 107409]"
      [visible]="true"
></dxi-value-axis>