CODEWITHSUNDEEP
chart.js
sboggs11
sboggs11

Reputation: 199

Chart.js 3.6.2, Angular 10: Logarithmic Line chart Y-Axis problems. How to set and keep Y-Axis properties, even when data changes?

I am creating a chart in Angular 10 using Chart.js 3.6.2.

Some problems I am struggling with:

  1. Y-Axis labels and lines are not static; different data causes a different quantity of Y-axis labels and lines to be displayed. If I comment in the 2nd dataset, I get:
  1. I want to display a chart with the Y-axis starting at 0, up to 100. However, a label and grid line is not displayed for Y=0. Since Y=0 is not displayed, any line segment originating at (or ending at) Y=0 is also not displayed in the chart.

My goal is like this image (which someone else created using the older Chart.js 2), preferably with the same number of horizontal gridlines:

What I want - 0 to 100

I have created a simple logarithmic chart with 3 data points per dataset. Relevant code is shown below and in this Stackblitz. Comments show some different things I have tried. Note that this code has a 2nd dataset, which is commented out. Uncommenting this dataset causes Y-axis changes.

<div style="padding: 1rem">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

export class AppComponent implements OnInit {
  @ViewChild('chartRef', { static: true }) chartRef: ElementRef;
  chart: Chart;

  ngOnInit() {
    this.createChart();
  }

  private get ctx(): CanvasRenderingContext2D {
    return (this.chartRef.nativeElement as HTMLCanvasElement).getContext(
      '2d'
    ) as CanvasRenderingContext2D;
  }

  private createChart(): void {
    if (this.chart) {
      this.chart.destroy();
    }
    if (!this.ctx) {
      return;
    }

    const myChart = new Chart(this.ctx, {
      type: 'line',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [
          {
            label: 'Blue Data',
            data: [0, 11.1, 20],
            borderColor: '#2184c6',
          },
          /* MARK COMMENT ONE: Uncommenting this changes the Y-axis */
          // {
          //   label: 'Orange Data',
          //   data: [0, 0.1, 85],
          //   borderColor: '#ff6f20',
          // },
        ],
      },
      options: {
        scales: {
          y:
            /** MARK COMMENT TWO:
           Uncommenting array brackets ("[" and "]") will cause non-logarithmic ticks (linear tick behavior), but starts with "0". I want to start with zero, with log ticks.
           */
            // [
            {
              type: 'logarithmic',
              bounds: 'ticks',
              // NOT A PROP FOR type: "logarithmic"
              // beginAtZero: true, //
              min: 0,
              max: 100, // required to make this always go to 100
              // grace: 10,
              // suggestedMax: 100,

              ticks: {
                display: true,
                // max: 100,
                // min: 20,
                // maxTicksLimit: 101,
              },
            },
          // ]
        },
      },
    });
  }

}

Upvotes: 0

Views: 917

Answers (2)

tercou1
tercou1

Reputation: 369

you're data on stackblitz can't start with 0, it needs a data point 0.01 for example - hope this helps enter image description here

Upvotes: 0

sboggs11
sboggs11

Reputation: 199

Not fixable using chartjs-3. The "solution" is to continue using chartjs-2 for now.

Although these properties/features, which were available in chartjs-2 were removed in chartjs-3, according to bug reports listed below, there appear to be plans to address them in upcoming V4.

Here are links to some related bug reports from the chartjs github repo (for version 3):

Refine logarithmic scaling / tick generation #9166

log scale step size too large #7332

v3 Regression: Line doesn't draw when points are out of range #9564

Upvotes: 0

Related Questions