How to add tooltip in chart for x category field label in EXTJS 6.5.x

Question

I am using EXTJs 6.5. I have designed a bar chart in which the x-axis category label length is too big which overlaps the label. So for a temporary fix, I have added below code to trim the value to 15 characters to show the values postfix with three dots.

{
type: 'category',
position: 'bottom',
fields: 'name',
renderer: function(item, label, lastLabel) {
  return Ext.util.Format.ellipsis(label, 15);
}

The issue I am facing is that I am not able to add any Html content for the label for example to word wrap the label or to add any tooltip.

Answer 1

1. Styling

Although limited, styles can be added to the chart label. Full options here.

Example (tested in this documentation fiddle):

axes: {
    type: 'category',
    position: 'bottom',
    fields: ['name'],
    label: {
    rotation: 270,
    color: 'red'
  },
    title: {
        text: 'Sample Values',
        fontSize: 15
    }
 },

2. Tooltip

To add a tooltip to your label, you could do something like this:

(code snippet edited to fit you needs)

renderer: function(item, label, lastLabel) {
  var trimmedLabel = Ext.util.Format.ellipsis(label, 15);

  return Ext.String.format("<div data-qtip="{0}">{1}</div>", label, trimmedLabel);
}