CODEWITHSUNDEEP
javascriptangularchart.jsng2-charts
Amila Iddamalgoda
Amila Iddamalgoda

Reputation: 4296

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

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.

Upvotes: 9

Views: 11291

Answers (1)

Amila Iddamalgoda
Amila Iddamalgoda

Reputation: 4296

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. enter image description here

Upvotes: 20

Related Questions