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.

alex.butnar · Answer 1 · 2020-02-05T10:09:27.993

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);
}

edited Feb 05 '20 at 10:09

answered Feb 04 '20 at 12:25

alex.butnar

284
3
10

By applying the tooltip code solution, I am getting **Uncaught ReferenceError: tooltip is not defined** – Mani Feb 04 '20 at 13:29
Well yes, you need to define the tooltip variable and adjust it as you like. – alex.butnar Feb 04 '20 at 14:02
Can you please help me where I have to define that. Sorry to bother you but can't able to figure it out. – Mani Feb 04 '20 at 18:30
@Mani this is a your full label. Without fromating. Just a string – pvlt Feb 04 '20 at 19:24
@pvlt didn't get you. – Mani Feb 05 '20 at 09:13
@Mani, I edited the code snippet. I believe you wanted to achieve something like this. – alex.butnar Feb 05 '20 at 10:10
It didn't work out, it shows the output as undefined. – Mani Feb 06 '20 at 10:40
For further assistance, please provide a working fiddle https://fiddle.sencha.com/ – alex.butnar Feb 06 '20 at 10:56
@Mani: If the solution helped you after all, please accept the answer. – alex.butnar Feb 17 '20 at 10:52
@ground_call sorry to say but in my codebase, the solution didn't work and I didn't get much time to put the sample code in fiddle. We just change the requirement and didn't implement this. – Mani Feb 29 '20 at 13:41

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

1 Answers1