Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14022

Multiple labels per item on Kendo chart

I'm trying to get multiple label per item on Kendo Column chart Desired layout looks like this desired chart

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}`;
  }
}

You can try this code here.

My current result look like this current progress


So my question is how to display multiple labels per item like on the first picture?


My current obstacles.

Upvotes: 10

Views: 2383

Answers (2)

Shai
Shai

Reputation: 3882

You can use the notes feature of the KendoChartComponent.

You can see the implementation here.

  1. You add noteTextField="periodName" [notes]="notesOptions" to your kendo-chart-series-item element.

  2. You add [labels]="labelOptions" to your kendo-chart-category-axis-item element.

  3. You add the following to your component:

    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,
        },
    };
    
  4. Change the labelVisual function return value to `$${e.dataItem.income}\`.

Note: Some changes can be performed and still give the desired design so if something isn't exactly right, it's probably fixable.

Here is an image of the resulting chart: enter image description here

Upvotes: 4

Mahdi Zarei
Mahdi Zarei

Reputation: 7456

I don't think kendo provides any native solution for that but what I can suggest is to:

  1. Use legends to display each bar meaning. like the example here.

  2. Use some self generated labels and position them under the table which is risky for UI. I provided an example here.

Upvotes: 1

Related Questions