or
1 answer
73 views
Need sample source code in Angular 14 UI like below format Kendo Chart.
Present is in jQuery, but instead of jQuery using angular 14 UI support source code.
https://docs.telerik.com/kendo-ui/knowledge-base/display-time-on-value-axis#solution
Martin Bechev
Telerik team
answered
on
07 Feb 2023
1 answer
168 views
hi,
How do I display the auto generated percent value as label in the bars?
I have a bar chart with [stack]="{ type: '100%' }". I would like to display the percentage as label in the bar (like in attached pic).
I tried label component but getting the value displayed rather calculated percentage.
<kendo-chart-series-item-labels format="{0:P}" position="center">
Here's the code:
https://stackblitz.com/edit/angular-ivy-n9xwdr?file=src%2Fapp%2Fapp.component.html
0 answers
35 views
I've got a bar chart and I would like to display different label than value, but I don't know how to do it. Tried with [name] property for the <kendo-chart-series-item>, but that does not work - it just show the legend next to chart itself, and I'd like to keep label on the bar.
My code:
<kendo-chart-series>
<kendo-chart-series-item
*ngFor="let item of series"
[data]="item.data" // <--- array of numbers, I'd like to replace number with string
[type]="item.type"
[color]="item.color"
[border]="{
width: 0
}"
>
<kendo-chart-series-item-labels
[background]="item.background || 'rgba(255, 255, 255, 0.5)'"
[position]="item.labelPosition"
[visible]="!!item.labelPosition"
></kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
0 answers
53 views
I'm trying to get multiple label per item on Kendo Column chart
Desired layout looks like on the first attached image.
I was able to get only this layout
You can try this code here.
My current result look like on the second attached image.
So my question is how to display multiple labels per item like on the first picture?
My current obstacles.
- I didn't find a way to add multiple `<kendo-chart-series-item-labels>` elements. Only one will be rendered, rest will be ignored.
- I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.
I asked this question on Stack Overflow as well.
Desired layout looks like on the first attached image.
I was able to get only this layout
import { Component } from '@angular/core';
import { groupBy, GroupResult } from '@progress/kendo-data-query';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';
export type TrendItem = {
clientName: string;
periodName: string;
income: number;
};
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="categories">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item [labels]="valueAxisLabels">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
<kendo-chart-series-item-labels [content]="labelVisual">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`,
})
export class AppComponent {
public valueAxisLabels: ValueAxisLabels = {
font: 'bold 16px Arial, sans-serif',
};
public trendItems: TrendItem[] = [
{
clientName: 'Client1',
periodName: 'Q1 2020',
income: 20,
},
{
clientName: 'Client1',
periodName: 'Q2 2020',
income: 15,
},
{
clientName: 'Client1',
periodName: 'Q3 2020',
income: 35,
},
{
clientName: 'Client1',
periodName: 'Q4 2020',
income: 40,
},
{
clientName: 'Client2',
periodName: 'Q1 2020',
income: 15,
},
{
clientName: 'Client2',
periodName: 'Q2 2020',
income: 20,
},
{
clientName: 'Client2',
periodName: 'Q3 2020',
income: 15,
},
{
clientName: 'Client2',
periodName: 'Q4 2020',
income: 30,
}
];
public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[])
.map((e) => e.value);
public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[];
public labelVisual(e: { dataItem: TrendItem }) {
return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`;
}
}My current result look like on the second attached image.
So my question is how to display multiple labels per item like on the first picture?
My current obstacles.
- I didn't find a way to add multiple `<kendo-chart-series-item-labels>` elements. Only one will be rendered, rest will be ignored.
- I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.
I asked this question on Stack Overflow as well.
