Get max and majorUnit values from multiple valueAxis's.

[Andy]

Hello,

We're currently using version 2014.1.318.

We have a chart containing two  valueAxis's:

valueAxis: [{
            name: "volumeAxis",
            title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
            labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
            color: '#adadad'
        }, {
            name: "time",
            visible: false
        }]

I'm trying to dynamically obtain the max and majorUnit value for the "volumeAxis".

I've tried:
var maxValueAxis = chart.options.series[0].valueAxis.max;
but the chart.options.series[0].valueAxis is undefined, the hint to use this came from http://www.telerik.com/forums/dynamic-value-axes-for-multi-axis-chart


The reason we're trying to do this is to dynamically increase the chart's volumeAxis by one unit (majorUnit), so eventually achieving something like this:

var maxValueAxis = kchart.options.series[0].valueAxis.max;
var majorUnit = kchart.options.series[0].valueAxis.majorUnit;

valueAxis = [{
    name: "volumeAxis",
    title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
    labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
    color: '#adadad',
    max: maxValueAxis + majorUnit
}, {
    name: "time",
    visible: false
}];

chart.setOptions({ valueAxis: valueAxis });
chart.redraw();

Thanks advance.

[Hristo Germanov]

Hello Andy,

Could you please try to get the max of your data in dataSource change event(you can get the maximum from data aggregation or you can calculate it). After that based on axis.min and axis.max you can calculate your major/minor units.

Note that you can't access the axis from series because they are not there. In the axis we hold only the reference name. You can get the live reference from chart._plotArea.axes.

I hope this hepls.

Regards,
Hristo Germanov
Telerik

 

 

[Andy]

Hi Hristo,

Your suggestions did work but I when used with Panes the chart completely screwed up so I eventually reverted to the my previous version (without max / majourUnit adjustments).

The problem I'm still having is that the column, data labels are being cropped.

I've tried using 

panes: [{   clip: false}] 

as suggested in one of your previous answers to another post of mine but unfortunately this did not work.

I've included a link to a JSFiddle demonstrating the cropping problems with the column data labels

Link to JSFiddle Demo 

Thanks,

Andy

[Hristo Germanov]

Hi Andy,

You can try:
1) to change the maximum of the value axis.
2) change the labels position. For example you can you insideEnd

Regards,
Hristo Germanov
Telerik

 

 

[Andy]

Hi Hristo, I tried your suggestion  (link to revised js fiddle example) which works well for bars above a certain height but for columns that are low to the horizontal axis then the label is cropped, as seen for the final column to the right in the js fiddle example.

Is it possible to dynamically select the most suitable position of the labels via scripting? For example something like:
if seriesColumnHeightPixels < seriesColumnLabelHeightPixels then seriesLabelPosition = "above" else seriesLabelPosition = "insideEnd" 

Thanks,

Andy

[Andy]

Hello,

I eventually implemented a way to expand the y-axis but the problem with it is that the upper gridline is now missing from the chart; see jsfiddle example in link below..

Link to JS Fiddle Example 3 showing missing grid line (topmost grid-line)

Is there a way to add this line in - I've tried adjusting margins and paddings for different parts of the script.

Thank you

[Hristo Germanov]

Hi Andy,

You need to set the majorUnit to be dividable to the maximum or you can add a plot band with the same color as majorGridlLne color with value equal to the axis max.

Regards,
Hristo Germanov
Telerik

 

 

[Andy]

Hristo, that solved the problem - maximum / majorUnit divisibility.

Many thanks,

Andy