CODEWITHSUNDEEP
javascriptjquerycsscharts
Anup
Anup

Reputation: 9738

chartjs.org Long Label issue

I am using Chart.js for displaying bar charts.

http://www.chartjs.org/docs/#bar-chart

I am facing issues when the Labels are Long, the design of the Bar chart gets dis aligned. I have created a fiddle :- Fiddle

var ppHorizontalBar = new Chart(document.getElementById("canvas_HorizontalBar1").getContext("2d")).Bar(data, opt);

I want to Shorten the Label when it is long.

I have tried many things but haven't got the proper results.

How to truncate the Labels? Or what is the best way to handle this for the design to look in order.

Upvotes: 0

Views: 2192

Answers (1)

Galatoni
Galatoni

Reputation: 68

Would running the label through a function prior to use be something you could look at?

var truncateString = function(initialString) {
    if (initialString.length > 10) {
        var shortString = initialString.substring(0,10);
        return shortString + '...';
    }
    return initialString;
}

Assuming this is acceptable, you could either loop through your labels array prior to adding it to the data, or loop through the object itself.

Upvotes: 1

Related Questions