kendo chart kendo-chart-series-item converting

[viraj]

kendo-chart-series-item converting the value from 1000 to 1k. Is there anything which can help by which I can save my time.and also I don't have to write the function for achieving this.

[Martin Bechev]

Hi Viraj,

Please could you provide some more details about the Chart configuration. By default, the numeric value axis is not automatically formatted and displays the values as they've been defined.

https://stackblitz.com/edit/angular-gkgrxu

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[viraj]

Thanks for the reply martin.I will be more accurate in what I have to achieve so I have added the screenshots for better understanding. I hope you can help 

The first pic is the chart which I have made but having the problem in values. I want to convert 1000000 to 1M in my chart.

the second pic is just the example of what i want to achieve

[Yanmario]

Hi Viraj,

Thank you for the additional context.

The developer can set a content callback of the label element and return the desired content to be displayed as a label in the Chart. Please check the following documentation about the content callback:

https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels/#toc-setting-content-callbacks

As such an if or switch statement can be used to determine if a "K", "M" or another suffix should be placed after the given number.

I hope this helps.

Regards,
Yanmario
Progress Telerik     

[viraj]

Thank you for you Answer it was really helpful.I was able to complete my $ issue from it,but still having some problem with the 1000000 to 1M and 1000 to k.So I will be working on that,but also iam providing you the dummy code.

<kendo-chart>

    <kendo-chart-title text="Units sold"></kendo-chart-title>

    <kendo-chart-category-axis>

      <kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">

      </kendo-chart-category-axis-item>

    </kendo-chart-category-axis>

    <kendo-chart-value-axis>

      <kendo-chart-value-axis-item [title]="{ text: 'Units Sold' }" [labels]="{ format: '#.0m' }">

      </kendo-chart-value-axis-item>

    </kendo-chart-value-axis>

    <kendo-chart-series>

      <kendo-chart-series-item type="column" [gap]="2" [spacing]=".25" [data]="[100, 123, 234, 343]">

      </kendo-chart-series-item>

      <kendo-chart-series-item [data]="[100020, 6010007, 2300001, 1906000]">

      </kendo-chart-series-item>

      <kendo-chart-series-item [data]="[4223355, 1200084, 6834189, 2345843]">

      </kendo-chart-series-item>

      <kendo-chart-series-item [data]="[8245677, 5345254, 2890610, 2096415]">

      </kendo-chart-series-item>

    </kendo-chart-series>

  </kendo-chart>

if you get the time for solving the issue it would be helpful for me.

Thank You

Viraj

[Martin Bechev]

Hi Viraj,

In order to display the desired labels, set the content property (as suggested by Yanmario) to a custom callback handler. The callback will be executed for each label allowing the developer to modify the default text. 

Implement a custom logic based on conditions and return the desired text, like:

<kendo-chart-value-axis-item [title]="{ text: 'Units Sold' }" [labels]="{ content: setLabel }">
      </kendo-chart-value-axis-item>

Where the setLabel is checking the values and replace the modified label text:

  public setLabel = (args) => {
    if (args.value >= 1000000 && args.value > 0) {
      const value = args.value.toString().split('');
      return `${value[0]}M`;
    } else {
      return args.value;
    }
  };

Please keep in mind that the demonstrated approach relies on a custom logic that needs to be further adjusted by the developer in order to fit the exact project needs. 

Regards,

Martin

[viraj]

Thank you, for your help Martin. It has done the job for me.  just had to do some modifications and I got the output desired output.