Kendo column chart labels

[Chaitra]

Hi,

I am working with the kendo chart , I need to add the label for each column ( vertically because horizontally it may not get enough space).

I have seen one example https://demos.telerik.com/kendo-ui/bar-charts/local-data-binding (similar need with angular and need axis also)

I have attached one image also, I am checking similar option to represent the chart with kendo angular

 

Thanks

 

 

 

[Dimiter Topalov]

Hello Chaitra,

You can use the seriesDefaults labels to configure the labels visibility and rotation angle, a.g.:

<kendo-chart
      [valueAxis]="{title: {text: 'Units sold'}}"
      [seriesDefaults]="{type: 'column', labels: {visible: true, rotation: -90}}"
      [legend]="{position: 'bottom'}"
      >

https://stackblitz.com/edit/angular-8igb18-ycjlw5?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Chaitra]

Hi,

Thanks a Lot for quick reply. 

This is what exactly I am looking for. 

I have one more question related to same issue. How I can [seriesDefaults] labels format upto 2 decimal places?
https://stackblitz.com/edit/angular-8igb18-mquk83?file=app/app.component.ts

Thanks

[Dimiter Topalov]

Hello Chaitra,

You can use the "format" property of the seriesDefault.labels configuration object to set the desired format, e.g.:

[seriesDefaults]="{type: 'column', labels: {visible: true, rotation: -90, format: 'n2'}}"

https://stackblitz.com/edit/angular-8igb18-n3vs1t?file=app/app.component.ts

Regards,
Dimiter Topalov
Progress Telerik

[Chaitra]

Hi ,

Thanks for the reply. I have checked but it is appending the ".00" always. Is there any formatting option available where It will work like - if value is 100 display 100 and if value is 100.5 display 100.5 and if value is 100.56565 then only display 100.57 like this. 

[Dimiter Topalov]

Hello Chaitra,

Then you can provide a custom format based on number placeholders that indicate zero or up to N number of digits, e.g.:

format: '{0:#.##}'

... would indicate 0, 1 or 2 digits after the decimal separator. Available formats are listed in the kendo-intl repository:

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/parsing-and-formatting/#toc-number-formatting

https://github.com/telerik/kendo-intl/blob/master/docs/num-formatting/index.md#number-formatting

https://github.com/telerik/kendo-intl/blob/master/docs/num-formatting/index.md#custom

Here is the updated example:

https://stackblitz.com/edit/angular-8igb18-aynnfs?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik