Line Chart Value Axis Label

[Hung]

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.

 

 

 

 

 

[Tsvetomir]

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

[Hung]

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.

[Tsvetomir]

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

[Hung]

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.

 

 

[Tsvetomir]

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