Apexcharts - How to add a line break to a label in a Radialbar

Question

I need to insert a long text in the center of a radial bar, so it fits properly, for example with a line break. The text I want to change is in the place of the example set as "text here..."

Angular is being used with the apexchart library installed in your environment.

I have looked in the documentation ways to change the label, but I could not find one that applies to a radial bar. Library link

Project link running online in stackblitz

The code snippet where the label is entered is as follows:

 public chartOptions: Partial<ChartOptions>;
  hexChartColor = '#3076B5';
  hexTrackColor = '#DAE7FD';
  percentValue = 70;
  textChart = `text here text here text here text`;

  constructor() {
    this.chartOptions = {
      colors: [this.hexChartColor],
      series: [this.percentValue],
      chart: {
        height: 400,
        width: '100%',
        type: 'radialBar',
        background: '#f1f1f1'
      },
      plotOptions: {
        radialBar: {
          inverseOrder: false,
          startAngle: 0,
          endAngle: 360,
          offsetX: 0, // Move chart sides
          offsetY: 0, // Move chart top, bottom
          hollow: {
            margin: 5,
            size: '60%',
            background: 'transparent',
            position: 'front'
          },
          track: {
            show: true,
            startAngle: undefined,
            endAngle: undefined,
            background: this.hexTrackColor,
            strokeWidth: '97%',
            opacity: 1,
            margin: 5
          },
          dataLabels: {
            show: true,
            name: {
              show: true,
              fontSize: '14px',
              fontFamily: undefined,
              fontWeight: 600,
              color: '#3076B5',
              offsetY: 20
            },
            value: {
              show: true,
              fontSize: '44px',
              fontFamily: undefined,
              fontWeight: 600,
              color: '#3076B5',
              offsetY: -20,
              formatter: function(val) {
                return val + '%';
              }
            }
          }
        }
      },
      labels: ['text here text here text here text text here']
    };
  }

HTML:

<div id="chart">
  <apx-chart 
    [series]="chartOptions.series" 
    [chart]="chartOptions.chart" 
    [plotOptions]="chartOptions.plotOptions"
    [labels]="chartOptions.labels" 
    [colors]="chartOptions.colors">
  </apx-chart>
</div>

Answer 1

You can put inside an array

labels: ['text here', 'text here', 'text here', 'text', 'text here'], 

This works on line and bar charts, should work for you.