[CLOSED] controlling the placement of the text label on line chart

[RCM]

Hi,

I would like to adjust the placement of the vertical axis title and the x-axis label to avoid overlapping as seen in the attached image. How can this be achieved. I know the label onPlaceLabel method is used to position the text, but it seems to be a private method. can you help with sample code. I would like to achieve the following

1. move the y-axis title lower (-ve y value)
2. move the first label to the right (+ve x value)

regards

[Baidaly]

Hello!

1. move the y-axis title lower (-ve y value)

Try the following overriding. With this overriding you can declare bottomPadding property to add or remove padding:

Ext.override(Ext.chart.axis.Axis, {
    drawTitle: function (maxWidth, maxHeight) {
        var me = this,
            position = me.position,
            surface = me.chart.surface,
            displaySprite = me.displaySprite,
            title = me.title,
            rotate = (position == 'left' || position == 'right'),
            x = me.x,
            y = me.y,
            base, bbox, pad;

        if (displaySprite) {
            displaySprite.setAttributes({ text: title }, true);
        } else {
            base = {
                type: 'text',
                x: 0,
                y: 0,
                text: title
            };
            displaySprite = me.displaySprite = surface.add(Ext.apply(base, me.axisTitleStyle, me.labelTitle));
            surface.renderItem(displaySprite);
        }
        bbox = displaySprite.getBBox();
        pad = me.dashSize + me.label.padding;

        if (rotate) {
            y -= ((me.length / 2) - (bbox.height / 2));
            if (position == 'left') {
                x -= (maxWidth + pad + (bbox.width / 2));
                            
                if (me.bottomPadding) {
                    y += me.bottomPadding;
                }
            }
            else {
                x += (maxWidth + pad + bbox.width - (bbox.width / 2));
            }
            me.bbox.width += bbox.width + 10;
        }
        else {
            x += (me.length / 2) - (bbox.width * 0.5);
            if (position == 'top') {
                y -= (maxHeight + pad + (bbox.height * 0.3));
            }
            else {
                y += (maxHeight + pad + (bbox.height * 0.8));
            }
            me.bbox.height += bbox.height + 10;
        }
        displaySprite.setAttributes({
            translate: {
                x: x,
                y: y
            }
        }, true);
    }
});

Example:

<ext:NumericAxis                             
    Fields="Data1"                            
    Grid="true"
    Title="Number of Hits"
    Minimum="0">
        <CustomConfig>
        <ext:ConfigItem Name="bottomPadding" Value="200" Mode="Raw" />
    </CustomConfig>
    <Label>
        <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
    </Label>
</ext:NumericAxis>

2. move the first label to the right (+ve x value)

You want to move only the first label or move all labels?

[RCM]

The override you provide worked for controlling the y-axis title.

if I can get a similar override for the x-axis label that can enable me manipulate the placement of any of the x-axis label, then that will be awesome. but my ultimate concern is to avoid an overlap of the y-axis title and the x-axis first label as seen in the attached image.

[Baidaly]

It seems you need to override onCreateLabel and onPlaceLabel functions: http://docs.sencha.com/extjs/4.1.3/#...xt.chart.Label

[RCM]

I need to have a base for the overriding. What is the base javascript code for these methods (oncreatelabel and onPlaceLabel)

In addition , the original code you provided to override the chart axis seems to be causing our application to become unstable and unusable, thus I have commented it out of our code .

[Baidaly]

In addition , the original code you provided to override the chart axis seems to be causing our application to become unstable and unusable, thus I have commented it out of our code .

It depends on what kind of series do you use. Here is example for LineSeries: http://docs.sencha.com/extjs/4.1.3/s...-onCreateLabel

Using search in Sencha Docs you can find other methods: http://docs.sencha.com/extjs/4.1.3/

In addition , the original code you provided to override the chart axis seems to be causing our application to become unstable and unusable, thus I have commented it out of our code .

Basically, this overriding just to show how it's possible to change initial position of title. You need to change it to make work for your case. However, we could investigate it if you'd provide a sample to reproduce?

[RCM]

Thanks anyways. I had to override the "drawHorizontalLabels" on the Axis class. Got it working the way I want for now.