Stretching Y-Axis Box

[Maciej]

Hi

I've got 3 RadHtmlCharts one below the other. The​y have different value range f.e. Chart1 from -9 to 5 and Chart2 from -100000 to + 100000. That causes the situation shown on picture, that they are placed not in line. I've already tried to adjust it in JS, but didn't manage to.

My code (I've tried many combinations):

var chart = $find("<%=timeChart.ClientID%>");

chart.get_kendoWidget()._plotArea.axisY.box.expand(50,50);

chart.get_kendoWidget()._plotArea.axisY.box.​pad(50);​

chart.get_kendoWidget()._plotArea.axisY.box.x2 = 150;

chart.repaint();

chart.get_kendoWidget().redraw();

chart.get_kendoWidget()​​.refresh();

 

None of this have worked.

I'm looking forward for your help

Greets,

Maciek

[Stamo Gochev]

Hi Maciej,

You can use the Margin property of LabelsAppearance to manually set the proper offset, so that the two charts look "aligned":

<YAxis>
    <LabelsAppearance>
        <TextStyle Margin="10px" />
    </LabelsAppearance>
</YAxis>

Of course, you can apply this customization to other elements (such as the chart title) depending on your requirements.

Regards,
Stamo Gochev
Telerik

[Maciej]

Thanks for your answer Stamo,

the thing is that I need to make it client-side, beacuse that's the only way to compute how many pixels I need to add. Do you know how can I achieve it ?

 

Maciek

 

[Stamo Gochev]

Hello Maciej,

After you have manually calculated the proper value for the margin property, you can set it using JavaScript like this:

<script type="text/javascript">
    function setMargin() {
        var chart = $find("Chart");
        var widget = chart.get_kendoWidget();

        widget.options.valueAxis.labels.margin = 10;

        chart.repaint();
    }
</script>

I recommend you to have a look at this help resource for additional information regarding this customization.

Regards,
Stamo Gochev
Telerik