Kendo Angular Chart change legend position based on size

We did something like this –

<div class="row">
    <div class="*ngIf="ShowChart" col-sm-4">
      <kendo-chart style="height: 175px;">
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-series>
          <kendo-chart-series-item
              type="donut" [startAngle]="150" [data]="data" 
              categoryField="field" field="value" colorField="color" [visual]="customVisual"
              [size]="30">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    </div>
    <div class="legend col-sm-8" [ngClass]="{'col-sm-8': ShowChart, 'col-sm-12': !ShowChart}">
        <table style="width: 100%">
            <tr *ngFor="let legendItem of ChartData.slice(0, 5); last as last;let i = index">
                <td>...</td>
            </tr>
        </table>
     </div>
</div>

This way, we were able to show the chart above and the legends below or next to each other based on the screen resolution.

Related Posts:

  1. Could not find module “@angular-devkit/build-angular”
  2. Difference between Constructor and ngOnInit
  3. AngularJS vs Angular [closed]
  4. When to use ‘npm start’ and when to use ‘ng serve’?
  5. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  6. ExpressionChangedAfterItHasBeenCheckedError Explained
  7. Angular 10 – can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  8. How to use *ngIf else?
  9. ngFor with index as value in attribute
  10. How to upgrade Angular CLI to the latest version
  11. What is pipe for in RxJS?
  12. Angular: Get current index in ngFor
  13. What is .subscribe in Angular?
  14. BehaviorSubject vs Observable?
  15. Angular 6 “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”
  16. ERR_INVALID_HTTP_RESPONSE using Angular 7 and ASP.Net Core 2.2 in Google Chrome browser
  17. What is the difference between Promises and Observables?
  18. mat-form-field must contain a MatFormFieldControl
  19. formSelect() method in materialize does’nt work in angular 6 inputs
  20. ERROR Error: No value accessor for form control with unspecified name attribute on switch
  21. form control error:ERROR Error: No value accessor for form control with unspecified name attribute
  22. You seem to not be depending on “@angular/core” and/or “rxjs”. This is an error
  23. ‘ng’ is not recognized as an internal or external command, operable program or batch file
  24. Unexpected value ‘undefined’ declared by the module ‘AppModule’
  25. Where to place/find the systemjs.config.js file in an angularJS2 project?
  26. ng serve does not work
  27. What is the equivalent of ngShow and ngHide in Angular 2+?
  28. document.getElementById replacement in angular4 / typescript?
  29. how to refresh page in angular 2
  30. TS1086: An accessor cannot be declared in ambient context
  31. Property ‘map’ does not exist on type ‘Observable‘
  32. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  33. ‘router-outlet’ is not a known element
  34. Angular 2 Cannot read property ‘config’ of null
  35. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  36. Set focus on element
  37. Cleanest way to reset forms
  38. Angular2 CLI error “@angular/compiler-cli” package was not properly installed
  39. Angular2 – How to create a simple table
  40. No provider for HttpClient
  41. Angular material Could not find Angular Material core theme
  42. Angular EXCEPTION: No provider for Http
  43. Error : Cannot find primary outlet to load
  44. cannot find module ‘@angular/http’?
  45. Templating with href in angular (4)
  46. How to implement sleep function in TypeScript?
  47. File Upload In Angular?
  48. is there any alternative for ng-disabled in angular2?
  49. Angular 2.0 and Modal Dialog
  50. Cannot find module ‘@angular/compiler’
  51. Implement session storage in an Angular 8 application
  52. Angular 2 [hidden] does not seem to be working?
  53. Local workspace file (‘angular.json’) could not be found. But same code works in another computer
  54. Can’t bind to ‘routerLink’ since it isn’t a known property
  55. How to use bootstrap 4 in angular 2?
  56. You have to be inside an angular-cli project in order to use the serve command
  57. How to get current route
  58. Angular4 core.es5.js Uncaught reflect-metadata shim is required when using class decorators
  59. Angular error: Please add a @NgModule annotation
  60. How to enable production mode?
  61. Angular 5: “No provider for ControlContainer”
  62. Getting No provider for NgControl Error after adding ReactiveFormsModule to my angular 4 app
  63. How to use `trackBy` with `ngFor`
  64. Angular routerLink does not navigate to the corresponding component
  65. How to use jQuery with Angular?
  66. Mask for an Input to allow phone numbers?
  67. What is the best way to delete a component with CLI
  68. GET http://localhost:4200/null 404 (Not Found) in angular2 with angular-cli
  69. Angular design pattern: MVC, MVVM or MV*?
  70. Module has no exported member error in angular module
  71. Check if Variable is Empty – Angular 2
  72. Angular 2 multiple modules
  73. Electron – Not allowed to load local resource
  74. How to apply filters to *ngFor?
  75. Select default option value from typescript angular 6
  76. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  77. Angular: ‘Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays’
  78. Angular: mat-form-field must contain a MatFormFieldControl
  79. (change) vs (ngModelChange) in angular
  80. Angular – ng: command not found
  81. ng is not recognized as an internal or external command
  82. Angular File Upload
  83. Uncaught TypeError : cannot read property ‘replace’ of undefined In Grid
  84. No value accessor for form control
  85. Angular4 – No value accessor for form control
  86. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  87. Angular 2 Cannot find control with unspecified name attribute on formArrays
  88. What is ViewChild in Angular2?
  89. Angular 5 to 6 Upgrade: Property ‘map’ does not exist on type Observable
  90. Angular 2 – Using ‘this’ inside setTimeout
  91. Angular: Cannot find a differ supporting object ‘[object Object]’
  92. SyntaxError: Unexpected token C in JSON at position 0 – Ionic 2 Http GET request
  93. What does the .subscribe() function do?
  94. How to use if-else condition with [ngClass] in angular 7?
  95. Errors: Data path “.builders[‘app-shell’]” should have required property ‘class’
  96. How to integrate WordPress with Angular 8 for website?
  97. What is Angular Routing?
  98. Angular 2 Sort table columns
  99. How to use onBlur event on Angular2?
  100. How do I install Angular 2 using NPM?

Leave a Comment