Show ellipsis in chart labels for long texts

4 posts, 0 answers
  1. Maitri
    Maitri avatar
    9 posts
    Member since:
    Jan 2019

    Posted 11 Aug Link to this post

    I am using column charts in which the labels on category axis are too long and they overlap each other. How can I show ellipsis(...) for longer texts so that they do not overlap with other labels?
  2. Hetali
    Admin
    Hetali avatar
    60 posts

    Posted 12 Aug Link to this post

    Hi Maitri,

    In order to show ellipsis for longer texts, use the content property of the CategoryAxisLabelsComponent and add the ellipsis as seen below:

    <kendo-chart>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [labels]="{content: content}">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
    </kendo-chart>

    public content = (e) => {
      if(e.value.length > 3) {
        var truncateValue = e.value.substring(0, 3) + '...';
        return truncateValue;
      } else {
        return e.value;
      }
    }

    OR

    The CategoryAxisLabels' rotation can be set to 'auto' which will rotate the labels if the labels are overlapping. For example:

    <kendo-chart>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [labels]="{rotation: 'auto'}">
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
    </kendo-chart>


    This StackBlitz example
    contains two column charts with long CategoryAxisLabels, I have added ellipsis in one chart and rotation in another.

    I hope this helps. Please let me know if I can further assist you.

    Regards,
    Hetali
    Progress Telerik

  3. Maitri
    Maitri avatar
    9 posts
    Member since:
    Jan 2019

    Posted 13 Aug in reply to Hetali Link to this post

    Hi Hetali,

    This is working as expected but i want to be able to see the full text when i hover over the label. Just like a tooltip.

  4. Hetali
    Admin
    Hetali avatar
    60 posts

    Posted 13 Aug Link to this post

    Hi Maitri,

    We have a dedicated article to display Axis Labels tooltip. Please add the following sinppet to show the tooltip on Category Label:

    <kendo-chart (render)="attachSurfaceHandlers($event)">
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item>
          <kendo-chart-category-axis-item-labels [content]='content' [visual]='visual'>
          </kendo-chart-category-axis-item-labels>
        </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
    </kendo-chart>
    
    <ng-template #popupTemplate>
      <div class="chart-popup k-tooltip">
        {{ popupContent }}
      </div>
    </ng-template>

    public attachSurfaceHandlers(e: any): void {
      e.sender.surface.bind('mouseenter', args => this.onMouseEnter(args));
      e.sender.surface.bind('mouseleave', args => this.onMouseLeave());
    }
    
    public onMouseEnter(e: any): void {
      const tooltip = e.element.parent.tooltip;
      if (!tooltip) {
        return;
      }
      if (this.popupRef) {
        this.popupRef.close();
      }
      this.popupContent = tooltip;
      this.popupRef = this.popupService.open({
        content: this.popupTemplate,
        offset: {
          left: e.originalEvent.pageX + 5,
          top: e.originalEvent.pageY + 10
        }
      });
    }
    
    public onMouseLeave(): void {
      if (!this.popupRef) {
        return;
      }
      this.popupRef.close();
        this.popupRef = null;
      }
    
    public visual = (e: AxisLabelVisualArgs): any => {
      const visual = e.createVisual();
      if(e.value.length > 3) {   // Remove the if-condition if you want to show the tooltip for all the labels
        (<any> visual).tooltip = e.value;
      }
      return visual;
    }

    In this updated Stackblitz example, the longer Category Labels show tooltip on hover in the Kendo UI Chart.

    Let me know if this helps or if you have any further questions.

    Regards,
    Hetali
    Progress Telerik

Back to Top