CODEWITHSUNDEEP
angularkendo-uikendo-ui-angular2kendo-chart
Amit
Amit

Reputation: 1491

Bar for Kendo Column Chart does not show if the data is relatively small -- Kendo Angular Chart

I came across a scenario where if the data set has a value which is much smaller than other values, then the vertical bar doesn't show up but this is not with Bar Chart. For bar chart horizontal bar appears on the chart. Although Legends appears for all the records in both the charts.

Not sure whether this is expected functionality or a bug.

My sample code which I have created for reproducing the bug raised by my QA team. Any help will be highly appreciated.

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-title text="Units sold"></kendo-chart-title>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>

        <kendo-chart-series-item type="column" [data]="[120000, 67000, 231, 196000000]">
        </kendo-chart-series-item>

      </kendo-chart-series>
    </kendo-chart>

<h4> H-Bar Chart</h4>


    <kendo-chart>
      <kendo-chart-title text="Units sold"></kendo-chart-title>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>

        <kendo-chart-series-item type="bar" [data]="[120000, 67000, 231, 196000000]">
        </kendo-chart-series-item>

      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
}

/Stackblitz for the same/

https://stackblitz.com/edit/angular-w5c6ir?file=src%2Fapp%2Fapp.component.html

Upvotes: 2

Views: 1404

Answers (1)

Amit
Amit

Reputation: 1491

Answering my own question for ones who might encounter such a scenario. I have raised this issue with the Kendo team and came to know its a bug. As of now, workaround is to disable clipping of the panes.

[panes]="[{ clip: false }]"

Update: Got it fixed in version @progress/kendo-angular-charts 3.5.2.

https://stackblitz.com/edit/angular-y6nkw1?file=app/app.component.ts

Now no need to set clip to false

stackblitz: https://stackblitz.com/edit/angular-dvynmu?file=src/app/app.component.html

Upvotes: 1

Related Questions