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,
},
];
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>