Estoy tratando de obtener varias etiquetas por elemento en el gráfico de columnas de Kendo. El diseño deseado se ve así 
Solo pude obtener este diseño
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}`; } }Puedes probar este código aquí .
Entonces, mi pregunta es cómo mostrar varias etiquetas por elemento como en la primera imagen.
Mis obstáculos actuales.
<kendo-chart-series-item-labels> . Solo se renderizará uno, el resto se ignorará.No creo que kendo proporcione una solución nativa para eso, pero lo que puedo sugerir es:
Puede utilizar la función de notas de KendoChartComponent.
Puedes ver la implementación aquí .
Agrega noteTextField="periodName" [notes]="notesOptions" a su elemento kendo-chart-series-item .
Agrega [labels]="labelOptions" a su elemento kendo-chart-category-axis-item .
Agrega lo siguiente a su componente:
public notesOptions = { position: 'bottom', icon: { visible: false, }, label: { color: 'black', content: (e) => e.dataItem.periodName, font: "12px Arial", margin: -30, }, line: { width: 0, }, }; public labelOptions = { margin: { top: 10, }, }; Cambie el valor de retorno de la función labelVisual a `$${e.dataItem.income}\` .
Nota: se pueden realizar algunos cambios y aún dar el diseño deseado, por lo que si algo no está exactamente bien, probablemente se pueda reparar.