jQuery UI Widgets › Forums › Chart › X-Axis Labels Hide on Resize
Tagged: Angular chart, chart, Chart X-Axis labels, hide label, jquery chart, jqxChart, labels, overlap, rotate, wrap
This topic contains 4 replies, has 2 voices, and was last updated by durech 8 years, 1 month ago.
-
Author
-
I have a column chart defined with the x-axis labels defined as this:
labels: { angle: -25, rotationPoint: 'topright', offset: { x: 0, y: -25 }, }
That is working just fine, however when I resize the chart (making it less wide), at some point a few of the interior labels are automatically hidden. I can understand this behavior if the text were actually overlapping , but it is not. Is there a setting to turn off this auto-hide of the the labels on resize.
The entire chart settings definition is pretty simple and is:
$scope.sensorHealthChartSettings = { title: ' ', description: '', enableAnimations: false, showToolTips: true, showLegend: false, showBorderLine: true, columnSeriesOverlap: true, padding: { left: 5, top: 0, right: 5, bottom: 0 }, titlePadding: { left: 0, top: 15, right: 0, bottom: 0 }, source: $scope.getSensorHealth(), colorScheme: 'scheme22', xAxis: { dataField: 'Name', displayText: 'State', gridLines: { visible: false }, labels: { angle: -25, rotationPoint: 'topright', offset: { x: 0, y: -25 }, } }, seriesGroups: [ { type: 'column', columnsGapPercent: 50, seriesGapPercent: 20, showLabels: true, valueAxis: { logarithmicScale: true, logarithmicScaleBase: 5, title: { text: 'Number of Sensors' } }, series: [ { dataField: 'Value', displayText: 'Sensors', useGradient: false, labels: { visible: true, verticalAlignment: 'top', offset: { x: 0, y: -15 } }, colorFunction: function (value, itemIndex, series, group) { var color; if (itemIndex !== null && itemIndex >= 0) { color = $scope.getSensorHealth()[itemIndex].Color; } return color; }, } ] } ] };
Any help would be appreciated.
Hello durech,
Unfortunately, the behaviour you describe is automatic and cannot be altered with jqxChart’s API. You may, however, try rotating the labels even more (
angle: -90,
).Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I cannot as some of the labels are fairly long and I only have limited height available for the entire chart. Doing what you suggest would make the chart area very small and the labels would also be more difficult to read. Please consider adding an option to allow turning off this auto-hiding (or adjust the tolerance use to determine when to hide a label. I know you are trying to make some reasonable decisions about label presentation, but either you need to modify the current hiding algorithm to take into account angled labels that do not overwrite the adjacent labels or you need to allow the user to have some additional control over this.
I have added tooltips so the user can at least mouse-over each column to see what the column represents. It is not ideal, but it is better than nothing. We have also had to document this behavior, so our users will know to use the tooltips.
Hello durech,
Thank you for your valuable feedback. We will consider improving this functionality.
Something else you may implement as a workaround is to have the labels on multiple lines (instead of rotating them).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/That still won’t work for me, as only a few of the strings are multiple words, but several a longer single strings, so laying them out horizontally will run in to the same hiding issue. I angled them in the first place in hopes to avoid the potential for overwrites of the labels as the user might resize the chart, but then ran into this issue. I hope you consider this feature for an upcoming version
Thanks
-
AuthorPosts
You must be logged in to reply to this topic.