Apex Charts - How to add a line break to a label on a RadialBar

user_11984478 0
Viewed 1632

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

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

Chart with issue to solve

I've already looked in the documentation for ways to change the label, but I couldn't find one that applies to a radial bar.

Project on stackblitz: go to project

Code: component.ts

 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']
        };
      }

code component.html

<div id="chart">
  <apx-chart 
    [series]="chartOptions.series" 
    [chart]="chartOptions.chart" 
    [plotOptions]="chartOptions.plotOptions"
    [labels]="chartOptions.labels" 
    [colors]="chartOptions.colors">
  </apx-chart>
</div>
apexcharts angular typescript
1 Answers

There seems to be no way to do this using CSS. You can break up the label you want to insert a line break into by using an array:

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

For a more dynamic approach, you can determine if the label is long so you can break it up:

//If there are more than 15 characters, break it up using one space as a delimiter
chartOptions.labels = chartOptions.labels.map(label => {
    return label.length > 15 ? label.split(" ") : label;
})

Reference to the documentation: https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/

user_80183250
Related