Labels Overlaps with Column

[PixParticipant]

Dears,
I have an issue with the bar chart:
– Bar Chart is Horizontal (orientation: ‘horizontal’,)
– Labels on Y-axis as also horizontal (textRotationAngle: 90,) (label is more than 20 characters, and I cannot split it into many lines)

Now I have an issue, whenever I reduce the window size, Labels and bars are overlapping.
If I set alignment of the label to the right, there is no more overlap; however, the labels are cut from the left side.

What I would like is to find a way to set the width of the bars part and the part of labels:

For instance: total container is 300px: 100px for labels, 200 px for bars.

Can you please support with the above solution or any other possible one?

Best Regards,
Pix

[StanislavParticipant]

Hello Pix,

Have you given a look at the documentation? In our API the ‘seriesGroups’ has some options for labels.
Maybe you could try putting some padding and ‘formatSettings’, just to see if something might help you.
Also, can you please send an example, fiddle, snippet or anything, so we can have a better understanding of the situation.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[PixParticipant]

Hello Stanislav,

Yes I have read all documentation and tried many options.

If you try the code below, with the description fields with strings of more than 10 characters and the chart div dimension:
width: 320px;
height: 66px;

You sill find that the chart is overlapping with the labels.

Let me know how i can share a screenshot with you for better visibility.

Below are the setting for the chart:

var settings = {
title: global_title,
description: ”,
enableAnimations: true,
showLegend: false,
showBorderLine: true,
backgroundColor: ‘#FAFAFA’,
showToolTips: false,
padding: { left: 3, top: 3, right: 20, bottom: 0 },
titlePadding: { left: 30, top: 0, right: 0, bottom: 5 },
source: dataAdapter,
xAxis:
{ dataField: ‘description’,
displayText: ‘Error’,
textRotationAngle: 90,
gridLines: { visible: false },
labels: {
visible: true,
verticalAlignment: ‘center’,
offset: { x: 0, y: 0 }
}
},
valueAxis:
{ position: ‘left’,
flip: true,
minValue: 0,
titlePadding: { left: 0, top: 0, right: 0, bottom: 5 },
gridLines: { visible: false },
description: desc_var,
formatFunction: function (value) {if (div_var==1) {
return parseFloat(value/1000).toFixed(0);
} else if (div_var == 2) {
return parseFloat(value/1000000).toFixed(0);
}else {return value;}}
},
seriesGroups:
[
{
type: ‘column’,
columnsGapPercent: 40,
orientation: ‘horizontal’,
series:
[
{ position: ‘left’,
dataField: ‘error_count’,
displayText: ‘error_count’,
colorFunction: function (value, itemIndex, serie, group) {
if (value<=100) {
return ‘#00cc00’;
}else if (value>=1000) {
return ‘#ff0000’;
}else{
return ‘#ff9900’;
}
}
}
]
}

]
};

Best REgards,
Pix

[StanislavParticipant]

Hello Pix,

I took a closer look at your case, but I didn’t find what exactly breaks it. When I did my tests it was fine and didn’t break once.
Maybe you have some other classes that overwrite the labels, by default the padding shouldn’t allow overlapping.

If you could send us more information, so we can find a solution.
For images, use this site: http://postimages.org/

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts