PDA

View Full Version : [CLOSED] Ext Chart



Prasoon
Nov 17, 2015, 10:07 AM
Hi Team,

need your help in ext chart, we are migrating our app charts from asp to ext,

24326

24327

Is it possible to rotate the axis title? so that we can get the title alignment same as of the 2nd image.

thanks and regards,
Prasoon

Daniil
Nov 17, 2015, 12:49 PM
Hi @Prasoon,

Please use this override. It is the best solution that I was able to find.

Ext.chart.axis.Axis.override({
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, spriteConfig;

if (displaySprite) {
displaySprite.setAttributes({ text: title }, true);
} else {
base = {
type: "text",
x: 0,
y: 0,
text: title
};

spriteConfig = Ext.apply(base, me.axisTitleStyle, me.labelTitle);

if (position === "right") { // Added
spriteConfig.rotate = {
degrees: 90, // By default it is 270
x: 0,
y: 0
};
}

displaySprite = me.displaySprite = surface.add(spriteConfig);
surface.renderItem(displaySprite);
}

bbox = displaySprite.getBBox();
pad = me.dashSize + me.label.padding;

if (rotate) {
if (position === "left") {
y -= ((me.length / 2) - (bbox.height / 2));
} else { // Added for the Right position
y -= ((me.length / 2) + (bbox.height / 2));
}

if (position === "left") {
x -= (maxWidth + pad + (bbox.width / 2));
} 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);
}
});

Prasoon
Nov 18, 2015, 6:11 AM
Thanks a lot Daniil, i will check and get back in case of issues.
please mark it as CLOSED.

thanks and regards,
Prasoon