Kendo UI for Angular - Bar Chart Fixed Bar Size

Question

We are currently using Kendo UI for Angular in our project and have implemented the Kendo bar chart. Currently the bar size is responsive based on the chart height. We need to set that bar to a fixed size as per the jQuery example below.

Anyone have any thoughts on doing this in Angular?

https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/fixed-bar-size

Kendo UI for Angular Bar Chart

Answer 1

It is possible to use the same approach for the angular chart:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item type="bar"[data]="[1, 2]" [visual]="barVisual">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

// component
public barVisual(e: any): void {
  //create the default visual
  const visual = e.createVisual();
  //scale it so that it has the predefined size
  visual.transform(geometry.transform().scale(1, BAR_SIZE / e.rect.size.height, e.rect.center() ));
  return visual;
}

https://plnkr.co/edit/RVRHuCiq4ZD2a6da56D3?p=preview