Question

68

Truncating canvas labels in ChartJS while keeping the full label value in the tooltips

rated 0 times [ 73] [ 5] / answers: 1 / hits: 22860 / 10 Years ago, tue, february 3, 2015, 12:00:00

I have some bar charts that have really long labels and they affect the size of the charts.

Example: http://jsfiddle.net/norbiu/aqa8w19d/4/

I'm trying to truncate the labels that show up under the chart while keeping the label that shows up in the tooltips when hovering over a bar. The problem is that the tooltips and the canvas labels both get their values from the labels array in the data structure. Truncating the value will show the shortened version in both locations.

sales: ko.observable({

    labels: ['A really really long label', 'Another long labe', 'A third label that is long', 'Q4', 'Q5', 'Q6'],

    datasets: [{

        label: 'Helados',

        fillColor: '#152491',

        data: [70, 32, 6, 23, 63, 43]

    }]

}),

The documentation has nothing on this. Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 10 Years ago yesseniadajab · Accepted Answer

In Chart JS V2 you can truncate labels passing the options object.
Also you can customize the tooltips.

options:{

    scales: {

        xAxes: [{

            ticks: {

                callback: function(value) {

                    return value.substr(0, 10);//truncate

                },

            }

        }],

        yAxes: [{}]

    },

    tooltips: {

        enabled: true,

        mode: 'label',

        callbacks: {

            title: function(tooltipItems, data) {

                var idx = tooltipItems[0].index;

                return 'Title:' + data.labels[idx];//do something with title

            },

            label: function(tooltipItems, data) {

                //var idx = tooltipItems.index;

                //return data.labels[idx] + ' €';

                return tooltipItems.xLabel + ' €';

            }

        }

    },

}