swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular

Home Page:https://swimlane.github.io/ngx-charts/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

area-chart unable to handle multi series with positive AND negative values

ATCODI opened this issue · comments

commented

Describe the bug
If a series contains negative and positive values, the component is unable to display the charts in a positive (y-axis-) and negative (y-axis-) area (and stacks them seperately). The area and the y-axis min/max are recently determined by the value of the first value(?!) - if it is positive: all further values will be handled likewise and the y-axis will not adapt. Furthermore the component starts to overlap the charts.

To Reproduce
Steps to reproduce the behavior:

Example data in .ts
multi: any[] =[
{
"series": [
{
"name": "janeiro",
"value": 0
},
{
"name": "fevereiro",
"value": 0
},
{
"name": "março",
"value": 0
},
{
"name": "abril",
"value": 0
},
{
"name": "maio",
"value": 0
},
{
"name": "junho",
"value": 0
},
{
"name": "julho",
"value": -63.92
},
{
"name": "agosto",
"value": -109.33
},
{
"name": "setembro",
"value": -9860.65
},
{
"name": "outubro",
"value": -68334.87
},
{
"name": "novembro",
"value": -836729.46
}
],
"name": "2022"
},
{
"series": [
{
"name": "janeiro",
"value": -3165831.52
},
{
"name": "fevereiro",
"value": -2771771.11
},
{
"name": "março",
"value": -7334865.28
},
{
"name": "abril",
"value": -4805615.22
},
{
"name": "maio",
"value": -10089405.2280025
},
{
"name": "junho",
"value": -402899.11
},
{
"name": "julho",
"value": 0
},
{
"name": "agosto",
"value": 0
},
{
"name": "setembro",
"value": 0
},
{
"name": "outubro",
"value": 0
},
{
"name": "novembro",
"value": 0
}
],
"name": "2023"
}
];
HTML
<ngx-charts-area-chart
[view]="view"
[scheme]="colorScheme"
[legend]="legend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxis]="xAxis"
[yAxis]="yAxis"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[timeline]="timeline"
[results]="multi"
(select)="onSelect($event)">

Screenshots

image