How to wrap X axis labels to multi-lines (X axis label formatting) in ng2-Charts?

Question

How to wrap x axis labels in to multi-lines (2 lines) in a bar chart made by https://valor-software.com/ng2-charts/ ?

Expected Result should be like this. See the X axis labeling.

Ng2-charts is based on Chart.js and found following links (PRs) which helps to address this problem.

https://github.com/chartjs/Chart.js/commit/d1b411f4fc2d7b9cafa2d235c9ee008d149a22e3 https://github.com/chartjs/Chart.js/pull/2704

However is it possible to achieve the same in ng2-charts ? Anyone came across this issue when using ng2-charts; if so please let me know how you approach to solve this in angular way.

Hey! Did you got any solution? if yes will you please share once example? Thanks — jay khatri, Oct 05 '20 at 11:29

score 19 · Accepted Answer · answered Jan 08 '19 at 16:29

19

Some workaround only if you want to wrap labels by spliting by space (" ").

scales: {         
      xAxes: [
        {
          ticks: {
            callback: function(label, index, labels) {
              if (/\s/.test(label)) {
                return label.split(" ");
              }else{
                return label;
              }              
            }
          }
        }
      ]
    }

Chart looks like this now.

answered Jan 08 '19 at 16:29

Amila Iddamalgoda

4,166
11
46
85

1

You can use some regex or text replace/split hack inside the callback method and achieve what you need. At the end you just need to return an array of strings. :) – Amila Iddamalgoda Jan 09 '19 at 02:15

How to wrap X axis labels to multi-lines (X axis label formatting) in ng2-Charts?

1 Answers1