swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.29k stars 1.15k forks source link

yScaleMax does not work in vertical Line Chart nor on Combo Chart #1352

Open roestigraben opened 4 years ago

roestigraben commented 4 years ago

Describe the bug Originally I want to use the Combo Chart. Here I want the Y axis being the same for the 2 series (bar chart and line chart). It does not work So, I tried on the plain Vertical Line Chart and use the documentation referred stackblitz of (https://stackblitz.com/edit/swimlane-line-chart?embed=1&file=app/app.component.ts) It does not work neither.

To Reproduce Steps to reproduce the behavior:

  1. use the indicated standard demo
  2. as the highest number is 350000, I tried to set the yScaleMax to say 400000
  3. Looking at the display, the values are there given by the tooltips, but the lines have diasspeared
  4. No error displayed, just the display does not render what it suppused to render

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

Demo use the URL and paste yScaleMax = 500000; into app.component.ts and paste [yScaleMax]="yScaleMax" into app.component.html

ngx-charts version "@swimlane/ngx-charts": "^13.0.2",

Additional context Add any other context about the problem here.

Solvengo commented 3 years ago

I'm having the same problem with the combo chart.

I need to have the y axis on the bar chart and line chart scaled equally.

Edit: We fixed it.

in combo-chart.component.ts

 @Input() yScaleMax;

  getYDomain() {
    const values = this.results.map((d) => d.value);
    const min = Math.min(0, ...values);
    const max = Math.max(...values);
    if (this.yLeftAxisScaleFactor) {
      const minMax = this.yLeftAxisScaleFactor(min, max);
      return [Math.min(0, minMax.min), minMax.max];
    } else {
      return [min, this.yScaleMax];
    }
  }

And then set your [yScaleMax]="yScaleMax" in the chart in ex. app-component.ts

<combo-chart-component
        *ngIf="isLoaded"
        [view]="view"
        [scheme]="colorScheme"
        [results]="revenueData"
        [lineChart]="revenueGoals"
        [colorSchemeLine]="lineChartScheme"
        [gradient]="gradient"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel"
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [yScaleMax]="yScaleMax"
      >
        >
      </combo-chart-component>