How many labels in axis labels?

[Jay]

Is there a way to know how many labels will be rendered for an axis? How about the minimum and maximum values of the labels? I'm trying to implement a shortLabels template function and knowing those values would make it much simpler. Right now I've got a hacky way of doing it based on experimentation, but I just came across another set of values that messed it up. If I knew those values starting out, it wouldn't be such a hack.

As an example, attached is picture of three charts, each rendered with a different number of axis labels.

[Nikolay]

Hi Jay,

The valueAxis labels that will render depend on the series values that the Chart has and their number calculate in a way so the Chart has labels below and above the min and max series values ensuring the Chart looks good.

I could suggest using the following properties to adjust the labels so they do not overlap and have enough space between them:

• valueAxis.labels.rotation: the rotation angle (in degrees) of the labels.
• valueAxis.labels.skip: the number of labels to skip
• valueAxis.labels.step: every n-th label is rendered where n is the step

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Jay]

Hi Nikolay, sorry to get back to this after so long. I'm not concerned about the spacing of the labels so much; I'm just trying to get a routine that can handle small and large variances equally well, which the Chart certainly does in calculating the values for the labels.

In fact, I can see where the Chart calculates the values for the autoMin, autoMax and majorUnit values, and I'm hoping there's a way to access those values. 

[Nikolay]

Hi Jay,

A way of counting the number of the labels I can think of is incrementing a counter every time a template is executed:

labels: {
            template: function(data) {
              count++
              return data.value
    }

https://dojo.telerik.com/OJAroVIM

However, I am not sure if this helps with the requirement. Please let time know.

Regards,

Nikolay

 

[Jay]

Hi Nikolay. Unfortunately, that doesn't help.  While knowing the total number of labels would improve my current function somewhat, I would need to know that when the template was first invoked. What I'm really looking for is a way to access the autoMin, autoMax and majorUnit values that the Chart determines for itself.

[Nikolay]

Hi Jay,

You can calculate the autoMin and autoMax manually by accessing the chart data and getting the smaller and the bigger values, then round up those to the majorUnit value and you will have the min and the max. 

To calculate the labels count subtract the min from the max value and divide by the majorUnit value.

Here is the internal implementation you can use as a reference:

function autoAxisOptions(seriesMin, seriesMax, options) {
    const narrowRange = options.narrowRange;

    let autoMin = autoAxisMin(seriesMin, seriesMax, narrowRange);
    let autoMax = autoAxisMax(seriesMin, seriesMax, narrowRange);

    const majorUnit = autoMajorUnit(autoMin, autoMax);
    const autoOptions = {
        majorUnit: majorUnit
    };

    if (options.roundToMajorUnit !== false) {
        if (autoMin < 0 && remainderClose(autoMin, majorUnit, 1 / 3)) {
            autoMin -= majorUnit;
        }

        if (autoMax > 0 && remainderClose(autoMax, majorUnit, 1 / 3)) {
            autoMax += majorUnit;
        }
    }

    autoOptions.min = floor(autoMin, majorUnit);
    autoOptions.max = ceil(autoMax, majorUnit);

    return autoOptions;
}

Regards,

Nikolay

[Jay]

Thanks, Nikolay. I ended up using an approach based on this.

[Nikolay]

Hi Jay,

You are welcome. I am glad to hear my suggestion is helping you move forward.

Additionally, as this is a forum thread I will appreciate it if you can share the solution you came up with. This might end helping others facing the same scenario.