How to show Kendo-chart-title in new line

Question

I am trying to display title based on the value received from the backend. When text value is small it fits properly in the chart area. But when large text value is coming from backend, it gets hidden.

Is there any way we can push it to a new line when large text value is returned from the server.

I am aware of \n which moves the text to a new line. But my data is dynamic so I am not sure when to add \n. Any help will be highly appreciated.

One way I am thinking is to count the length of string and add '\n' not sure if this will be a right approach.

Here is my code:

/*app.component.ts**/

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div id="chart-wrapper">
    <kendo-chart [seriesColors]="['orange', '#ffe']">
    <kendo-chart-title text={{title}}></kendo-chart-title>
      <kendo-chart-legend position="top"></kendo-chart-legend>
      <kendo-chart-area background="#eee" [margin]="0"> </kendo-chart-area>
      <kendo-chart-series>
        <kendo-chart-series-item type="pie"
          [data]="pieData"
          field="value"
          categoryField="category">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    <div>
  `
})
export class AppComponent {
  public pieData: any = [
    { category: 'Eaten', value: 0.42 },
    { category: 'Not eaten', value: 0.58 }
  ]

  public title = "this is test title to check whether it breaks in new line or not";
}

Stackblitz for the issue: https://stackblitz.com/edit/angular-aqdtsd?file=app/app.component.ts

Answer 1

A simple way to fix this is to format your title on your component. Just add "\n" to the title it will break down into lines

public title = "this is test \n title to check whether it breaks in new line or not";

here is a logic

this.title = this.title.replace(/(.{30})/g,"\n")

STACKBLITZ DEMO