jQuery UI Widgets › Forums › Chart › X-Axis Labels Hide on Resize
Tagged: Chart X-Axis labels
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 8 years, 4 months 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.
-
AuthorPosts
You must be logged in to reply to this topic.