12

I use Chart.js( Version: 2.7.2 ) in my application and some labels in resulting rows are rather long 

 var barCanvas = document.getElementById("canvasVoteNames"); var ctx = barCanvas.getContext('2d'); var numberWithCommas = function(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; var self = this; var myChart = new Chart(ctx, { // stacked bar report https://jsfiddle.net/sdfx/hwx9awgn/ type: 'bar', data: { labels:monthsXCoordItems, datasets: [ { label: 'Correct Votes', data: voteValuesCorrect, borderWidth: 1, // The stroke width of the bar in pixels. backgroundColor : formatColor('#05b932'), //rgba(0, 0, 0, 0.1), // The fill color of the bar. See Colors borderColor: formatColor('#05b932'),// rgba(255, 0, 0, 0.1) // The color of the bar border. hoverBackgroundColor : formatColor('#05b932'), // The fill colour of the bars when hovered. hoverBorderColor: formatColor('#05b932'), // The stroke colour of the bars when hovered. hoverBorderWidth : 1 // The stroke width of the bars when hovered. }, { label: 'Incorrect Votes', data: voteValuesNoneCorrect, borderWidth: 1, // The stroke width of the bar in pixels. backgroundColor : formatColor('#b1a19a'), //rgba(0, 0, 0, 0.1), // The fill color of the bar. See Colors borderColor: formatColor('#b1a19a'),// rgba(255, 0, 0, 0.1) // The color of the bar border. hoverBackgroundColor : formatColor('#b1a19a'), // The fill colour of the bars when hovered. hoverBorderColor: formatColor('#b1a19a'), // The stroke colour of the bars when hovered. hoverBorderWidth : 1 // The stroke width of the bars when hovered. }, ] }, options: { // options of Report By Vote Names animation: { duration: 10, }, tooltips: { // tooltip text of Report By Vote Days ( 'bar' report ) mode: 'label', callbacks: { label: function(tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel); } } }, // tooltips: { // tooltip text of Report By Vote Days ( 'bar' report ) scales: { // options for x and y scales xAxes: [{ stacked: true, // Stacked bar charts can be used to show how one data series i gridLines: { display: false }, }], yAxes: [{ stacked: true, // Stacked bar charts can be used to show how one data series i ticks: { callback: function(value) { // on Y scale show only integer without decimals if (Math.floor(value) === value) { return value; } }, // callback: function(value) { return numberWithCommas(value); }, }, }], }, // scales: { // options for x and y scales legend: {display: true} } // options: { // options of Report By Vote Names }); // var myChart = new Chart(ctx, { // stacked bar report https://jsfiddle.net/sdfx/hwx9awgn/ }

The chart I got is what I need https://i.sstatic.net/6Yejn.jpg but with long labels for any bar it does not look good and I did not find if there is a way to fix it somehow ? Why labels has big marging, not as relative bars?

Some options for xAxes or additive legends?

Thanks!

Improve this question
2
  • Sorry, I still search for some decision . I googled and found several examples, but they all with short labels and no problems similar mine... No ideas? Commented Sep 30, 2018 at 12:40
  • I found a similar example and modified some labels to repeate my problem: jsfiddle.net/hwx9awgn/1259 some labels on xAxes are not showm at all : actually 1,3,5... labels are shown can be any decision? Commented Oct 1, 2018 at 5:22

1 Answer 1

Reset to default
20
+50

You were using ChartJs version 2.1.3 in your JSFiddle, which does not seem to handle multiline labels

You can use multilines labels with the following solutions:

var dates = [["Some l-o-o-o-o-", "o-o-o-o-o-o-o-", "n-n-n-n-n-n-g-g-g-", "g-g-g-g label"], "DDD", ["EEE", "FFF", "GGG"], "HHH", "III"];

You can replace a label by an array, and each element of the array will be considered as a new line (See JSFiddle): https://jsfiddle.net/cyuwxh3q/

If your labels are generated dinamically, you can split them with a plugin in your chart configuration : 

type: 'bar', data: {...}, options: {...}, plugins: [{ beforeInit: function (chart) { chart.data.labels.forEach(function (value, index, array) { var a = []; a.push(value.slice(0, 5)); var i = 1; while(value.length > (i * 5)){ a.push(value.slice(i * 5, (i + 1) * 5)); i++; } array[index] = a; }) } }]

This function will turn each label into an array of element which length is less or equal to the given value (here 5) (See JSFiddle) : https://jsfiddle.net/jhr5nm17/

Those are two easy ways to handle long labels by replacing them by multiline labels, hope it helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thank you, that is what I searched! Also are some parameters to change width beetween bar elements on xAxes?
You can add a barThickness property in options: { scales: { xAxes: [{ barThickness: value, ... }] } }
I found one more problem : I made popup dialog opened by click on slice and to define which slice is clicked I saved id/name of items in array and made search by name of label. Now that does not work, as text of label is array. Sure I can make by concatenated array string, but if there is some better decision, like user's defined tag for any slice?
You will need to override the chart , see this question for more informations : stackoverflow.com/questions/28377145/…. If this does not suit you, consider writing a new question to get more answers. And if the answer provided here helped you to resolve your problem, please consider accepting it.
@Ivan If this answer solved your problem, please don't forget to Accept it.
|