0

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.

Anup
  • 9,396
  • 16
  • 74
  • 138
  • The alignment doesn't look wrong to me in Firefox/Chrome. Is the problem that the labels reduce the height of the rest of the chart? Can you just truncate each label to a certain number of chars before passing the array to Chart.js? What about first setting the height of the canvas proportional to the longest label? – freshtop Jul 16 '15 at 07:01

1 Answers1

1

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.

Galatoni
  • 68
  • 8
  • When i truncate the label names, it is working good. But in tooltip how to retain full label name? – Anup Jul 16 '15 at 07:23
  • Didn't realise you had a tooltip. I'm certainly no expert on Chart.js. I think you can use html on your labels though. Though having looked, this question has actually already been answered: http://stackoverflow.com/questions/28296994/truncating-canvas-labels-in-chartjs-while-keeping-the-full-label-value-in-the-to Would somebody mind marking this question please? I'm a noobie and I lack the required rep. – Galatoni Jul 16 '15 at 07:29