Chartist-js: IE11 Issue : Facing Issue Center Alignment of labels of Horizontal & Vertical Bar Chart

[joshiashish23]

I have tried text-anchor:center even than it's not working, Please suggest which property should I Use for center alignment of labels in Horizontal and vertical bar chart

I am using Chartist.js 0.7.3 version

[joshiashish23]

Here for horizontal chart below function work :

chart.on('draw', function (event) {
// If the draw event is for labels on the x-axis
if (event.type === 'label' && event.axis.units.pos === 'x') {
if (!chart.supportsForeignObject) {
event.element.attr({
x: event.x + event.width / 2,
'text-anchor': 'middle'
});
}
}
});

For Vertical Chart :

chart.on('draw', function (event) {
if (event.type === 'label' && event.axis.units.pos === 'y') {
if (!chart.supportsForeignObject) {
event.element.attr({
y: event.y + event.height / 2
});
}
}
});

But still I am facing below issues:

1) In horizontal chart long labels are overlapping, Don't know which css property use for breaking lablels
2) In vertical chart labels are left align, Don't know which css property use for Right alignment of labels

[gionkunz]

Hi there

1) That's the big issue with SVG where with native text elements it's not possible to do multi-line / line wrapping and this is the reason why we use foreignObjetcts. However, none of the IE's are supporting the extensibility module in SVG.

2) For right aligning SVG text elements you should use text-anchor: end;

[gionkunz]

I'm closing this issue for now. Please comment if you need more input.