I want to hide the y-axis values completely (the 25, 20, 15, 5, 0) in this example: Stackblitz to play with: https://stackblitz.com/edit/angular-kendo-chart-m5fx9p?file=app/app.component.ts

I have tried to set the [labels] to return '' and set visible: false but still no luck.

Code to share:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="['normal', 'smooth']" [(ngModel)]="style">
    </kendo-dropdownlist>
        <kendo-dropdownlist [(ngModel)]="secondaryList">
    </kendo-dropdownlist>    
    <kendo-chart>
    <kendo-chart-axis-defaults [line]="{visible: false}" 
    [labels]="labels" 
    [majorTicks]="majorTicks"
    [minorTicks]="minorTicks" 
    [labels]="test" [majorGridLines]="{ visible : false}">
    </kendo-chart-axis-defaults>
      <kendo-chart-series>
        <kendo-chart-series-item [style]="style" type="scatterLine"
            [data]="data"
            [markers]="{ visible: false }">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `,
})
export class AppComponent implements OnInit {
  public style: string = 'normal';

  public test() {
    return '';
  }
  public labelContent(e: any): string {
    if (e.value === 0) {
      return '';
    }

    return e.value;
  }
  public data: any[] = [
    [0, 20],
    [1, 1],
    [2, 18],
    [3, 3],
    [4, 15],
    [5, 5],
    [6, 10],
    [7, 6],
    [8, 9],
    [9, 6],
    [10, 10],
    [11, 5],
    [12, 13],
    [13, 3],
    [14, 16],
    [15, 1],
    [16, 19],
    [17, 1],
    [18, 20],
    [19, 2],
    [20, 18],
    [21, 5],
    [22, 12],
    [23, 7],
    [24, 10],
    [25, 8],
  ];
  public secondaryList: Array<any> = [
    { text: 'value1', value: 'value2' },
    { text: 'value2', value: 'value2' },
  ];
  ngOnInit() {
    if (this.style === 'normal') {
      this.secondaryList = [
        { text: 'value1', value: 'value2' },
        { text: 'value2', value: 'value2' },
        { text: 'value3', value: 'value3' },
        { text: 'value4', value: 'value4' },

        { text: 'value5', value: 'value5' },
      ];
    }
    if (this.style === 'smooth') {
      this.secondaryList = [{ text: 'value5', value: 'value5' }];
    }
  }
}

CodePudding user response：

As per your requirements the html selector is kendo-chart-y-axis > kendo-chart-y-axis-item please check the below two stackblitz!

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="['normal', 'smooth']" [(ngModel)]="style">
    </kendo-dropdownlist>
        <kendo-dropdownlist [(ngModel)]="secondaryList">
    </kendo-dropdownlist>

    
    <kendo-chart>
    <kendo-chart-y-axis>
      <kendo-chart-y-axis-item [visible]="false">
      </kendo-chart-y-axis-item>
    </kendo-chart-y-axis>
    <kendo-chart-axis-defaults [line]="{visible: false}" 
    [labels]="labels" 
    [majorTicks]="majorTicks"
    [minorTicks]="minorTicks" 
    [labels]="test" [majorGridLines]="{ visible : false}">
    </kendo-chart-axis-defaults>
      <kendo-chart-series>
        <kendo-chart-series-item [style]="style" type="scatterLine"
            [data]="data"
            [markers]="{ visible: false }">

            <kendo-chart-series-item-labels [content]="labelContent"
                                      [visible]="true"></kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `,
})
export class AppComponent implements OnInit {
  public style: string = 'normal';

  public test() {
    return '';
  }
  public labelContent(e: any): string {
    if (e.value === 0) {
      return '';
    }

    return e.value;
  }
  public data: any[] = [
    [0, 20],
    [1, 1],
    [2, 18],
    [3, 3],
    [4, 15],
    [5, 5],
    [6, 10],
    [7, 6],
    [8, 9],
    [9, 6],
    [10, 10],
    [11, 5],
    [12, 13],
    [13, 3],
    [14, 16],
    [15, 1],
    [16, 19],
    [17, 1],
    [18, 20],
    [19, 2],
    [20, 18],
    [21, 5],
    [22, 12],
    [23, 7],
    [24, 10],
    [25, 8],
  ];
  public secondaryList: Array<any> = [
    { text: 'value1', value: 'value2' },
    { text: 'value2', value: 'value2' },
  ];
  ngOnInit() {
    if (this.style === 'normal') {
      this.secondaryList = [
        { text: 'value1', value: 'value2' },
        { text: 'value2', value: 'value2' },
        { text: 'value3', value: 'value3' },
        { text: 'value4', value: 'value4' },

        { text: 'value5', value: 'value5' },
      ];
    }
    if (this.style === 'smooth') {
      this.secondaryList = [{ text: 'value5', value: 'value5' }];
    }
  }
}

forked stackblitz

forked stackblitz