locked
chart.js tooltip for x axis values RRS feed

  • Question

  • User-153404742 posted

    Hi,

    I'm trying to display part of the string on x axis label points on bar chart using chart.js if string is longer than a few characters....and on hover over, I want to display entire text.  So far I have the text trimming and displaying like "abc..." if string is say "abcdefgh" but not sure how to get hover over working.

     scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function (t) {
                                    var maxLabelLength = 3;
                                   if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';
                                   else return t;
                                }
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Scores'
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                            },
                            scaleLabel: {
                                display: true,
                                labelString: '# of answers'
                            }
                        }]
                    }
                  
                    tooltips: {
                        mode: 'index',
                        callbacks: {
                            title: tooltip => data.labels[tooltip[0].index]
                        }
                    }
                },

    Wednesday, May 5, 2021 3:22 PM

All replies

  • User1535942433 posted

    Hi inkaln

    As far as I think,you could check out the mode tooltip config option and hover config options for your needs. 

    Just like this:

    options: {
                            scales: {
                                xAxes: [{
                                    ticks: {
                                        beginAtZero: true,
                                        callback: function (t) {
                                            var maxLabelLength = 3;
                                            if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';
                                            else return t;
                                        }
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Scores'
                                    }
                                }],
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true,
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: '# of answers'
                                    }
                                }]
                            },
                            tooltips: {
                                mode: 'index',
                                callbacks: {
                                    title: tooltip => data.labels[tooltip[0].index]
                                }
                        },
                        hover: {
                                mode: 'nearest',
                                intersect: true
                            },
                        }

    Best regards,

    Yijing Sun

    Thursday, May 6, 2021 5:42 AM
  • User-153404742 posted

    The hover doesn't work...nothing comes up.  I tried placing tooltip section inside the xAxes after scaleLabel but it doesn't seem to work.

    Thursday, May 6, 2021 6:47 PM
  • User1535942433 posted

    Hi inkaln,

    The hover doesn't work...nothing comes up.  I tried placing tooltip section inside the xAxes after scaleLabel but it doesn't seem to work.

    Do you need show tooltip when hovering on Xaxis label? Or a datapoint? 

    Could you post your current result? Do you press F12 to check if there are errors?

    Best regards,

    Yijing Sun

    Friday, May 7, 2021 7:02 AM
  • User-153404742 posted

    when hovering over the x-axis label...so I am trying to trim text to 3 characters if string is longer than that and then show "..." and when user hovers over the x-axis label, I want the tooltip to show the entire label text.  So if I have x axis data as ["test123", "test3456","really long string"]  I want it to actually show as "tes...", tes...", "rea...." and when user hovers over each of this x-axis labels, it should show the actual text.  so when hovering over "rea...", it should show tooltip "really long string".

    Friday, May 7, 2021 3:44 PM
  • User1535942433 posted

    Hi inkaln,

    As far as I think,no such function at the moment for chart.js. It only show tooltip on x-axis data point instead of x-axis label.

    Best regards,

    Yijing Sun

    Tuesday, May 11, 2021 9:21 AM