CODEWITHSUNDEEP
angulartypescriptng-apexcharts
user13031827
user13031827

Reputation: 77

Display datalabels in two lines apexcharts

I'm using angular ng-apexcharts and I need to display the datalabels in two lines. I try to use "\n" but still can't make it as 2 lines

  dataLabels: {
    enabled: true,       
    formatter: function (val, opts) {
      var duration = opts.w.config.series[opts.seriesIndex]
      var h = Math.floor(duration / 3600);
      var m = Math.floor(duration % 3600 / 60);
      var s = Math.floor(duration % 3600 % 60);
      var hDisplay = h > 9 ? h : "0" + h;
      var mDisplay = m > 9 ? m : "0" + m;
      var sDisplay = s > 9 ? s : "0" + s;

      if (h > 0) {
        return hDisplay + ":" + mDisplay + "\n" + "hours";
      }
      else {
        return mDisplay + ":" + sDisplay + "\n" + "minutes";
      }
       
    },
  },

enter image description here

Upvotes: 1

Views: 2726

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9893

You can use this structures: ["first line text", "second line text"]

dataLabels: {
        enabled: true,       
        formatter: function (val, opts) {
          var duration = opts.w.config.series[opts.seriesIndex]
          var h = Math.floor(duration / 3600);
          var m = Math.floor(duration % 3600 / 60);
          var s = Math.floor(duration % 3600 % 60);
          var hDisplay = h > 9 ? h : "0" + h;
          var mDisplay = m > 9 ? m : "0" + m;
          var sDisplay = s > 9 ? s : "0" + s;
    
          if (h > 0) {
            return [hDisplay + ":" + mDisplay , "hours"];
          }
          else {
            return [mDisplay + ":" + sDisplay , "minutes"];
          }
           
        },
      },

Here is working sample on codesandbox

And the result:

enter image description here

Upvotes: 5

Related Questions