This is a migrated thread and some comments may be shown as answers.

Line Chart Value Axis Label

5 Answers 14 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Hung
Top achievements
Rank 1
Veteran
Hung asked on 02 Oct 2020, 03:27 AM

I created a group line chart with the ValueAxis defined as below:

The actual data would be decimal 4.00, 4.20, 4.90, 5.00. 5.50 ....

 

.ValueAxis(axis => axis.Numeric().Labels(labels => labels .Format("{0}").Skip(2).Step(2)))

So the chart is generated as attached. 

Now we do not want to display 0, 1, 2, 3, 4, 5 ... but want to display 

A, B, C, D, E, F ... 

where A replace 0, B replace 1, ...

We are using UI for ASP.NET Core

How would do we do this?

 

 

Also, if there are multiple records for a given date for an account with difference value, only one will be selected and display on the chart. Is there a way to display all? 

e.g Account 123 on July 21, have two records, one with value of 4 and one with 3, only one of the value will be on the chart.

 

Thanks.

 

 

 

 

 

5 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 06 Oct 2020, 01:01 PM

Hi Hung,

In order to replace the labels on the value axis of the Kendo UI Chart, you should make use of the ValueAxis.Labels.Template option instead of the Format option.

As per the date axis, when there are multiple values with the same date, the values will be aggregated and displayed on the chart. At present, this is the default functionality of this axis.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hung
Top achievements
Rank 1
Veteran
answered on 06 Oct 2020, 01:48 PM

I try template with simple format like adding $, % , but could not figure out what format template that would call a Javascript or a function in the model to convert the numeric display to a string. In my case I want to convert the Value label on Y axis from 

1 to A

2 to B

3 to C

...

Seem there is not a way to pass the label value to the template.

0
Tsvetomir
Telerik team
answered on 08 Oct 2020, 04:56 PM

Hi Hung,

If you would like to execute custom logic in a JavaScript function, you could pass the name of the function to the Template option of the chart. As an argument pass "data" as this object contains all the relevant data:

.ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Template("#=myFunc(data)#"))
        )

And the JavaScript function:

 <script>
        function myFunc(e) {
            alert(e.value);
        }
    </script>

I hope this helps.

 

Kind regards,
Tsvetomir
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Hung
Top achievements
Rank 1
Veteran
answered on 08 Oct 2020, 06:36 PM

Tsvetomir, 

Thanks. It worked perfectly. 

The key is passing [data] as parameter in the function. 

Your solution is perfectly implemented.

In the future, where do I learn to use [data] as parameter in this case? Is there any online or document that would give me a hint to use [data] as parameter?

Is that something that a web developer is expected to know? 

Best regards, 

Many thanks.

 

 

0
Tsvetomir
Telerik team
answered on 09 Oct 2020, 12:51 PM

Hi Hung,

In general, all of the Kendo UI templates follow the same naming policy and the data name is one of them. The value is actually accessible via the value keyword as well. As documented here:

https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI.Fluent/ChartValueAxisLabelsSettingsBuilder#templatesystemstring

 

Regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart
Asked by
Hung
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Hung
Top achievements
Rank 1
Veteran
Share this question
or