jQuery UI Widgets Forums Chart X-Axis Labels Hide on Resize

This topic contains 4 replies, has 2 voices, and was last updated by  durech 7 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • X-Axis Labels Hide on Resize #87423

    durech
    Participant

    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.

    X-Axis Labels Hide on Resize #87442

    Dimitar
    Participant

    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,
    Dimitar

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

    X-Axis Labels Hide on Resize #87550

    durech
    Participant

    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.

    X-Axis Labels Hide on Resize #87565

    Dimitar
    Participant

    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,
    Dimitar

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

    X-Axis Labels Hide on Resize #87605

    durech
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.