Type 'Element' is missing the following properties from type 'Group': children in Kendo UI Charts Drawing at e.createVisual()

Question

I used the function below in Angular 10 for Kendo Charts drawing on Donut Chart

  public visual(e: SeriesVisualArgs): Group {
    // Obtain parameters for the segments
    this.center = e.center;
    this.radius = e.innerRadius;
    // Create default visual
    return e.createVisual();
  }

Getting the below error

ERROR in src/app/modules/sidenav/dashboard/dashboard.component.ts:85:5 - error TS2740: Type 'Element' is missing the following properties from type 'Group': children, append, clear, insert, and 2 more.

85     return e.createVisual();

score 0 · Accepted Answer · edited Sep 04 '20 at 19:55

Please take a look at the following answers to achieve the desired Donut Chart:

To draw a thinner Donut, use the holeSize property in the SeriesItemComponent as seen below:

<kendo-chart-series>
  <kendo-chart-series-item type="donut" [data]="data" [holeSize]="120">
  </kendo-chart-series-item>
</kendo-chart-series>

We have a dedicated documentation to display information in the center. Use the following syntax to add the text in the Center Template:

<kendo-chart>
  <ng-template kendoChartDonutCenterTemplate>
    <h3> $10800.71 </h3>
    <span> Total Payroll Cost </span>
  </ng-template>
</kendo-chart>

Use the visual property of the LegendItemComponent to draw the custom legend. For example:

<kendo-chart-legend position="bottom">
  <kendo-chart-legend-item [visual]="visual"></kendo-chart-legend-item>
</kendo-chart-legend>
public visual(e: LegendItemVisualArgs) {

  var item = e.series.data[e.pointIndex];

  const path1 = new Path({
    stroke: { color: e.options.labels.color, width: 1 },
    fill: { color: e.options.markers.background }
  });
  path1.moveTo(0, 0).lineTo(100, 0).lineTo(100, 30).lineTo(0, 30).close();

  const path2 = new Path({
    stroke: { color: e.options.labels.color, width: 1 }
  });
  path2.moveTo(0, 30).lineTo(100, 30).lineTo(100, 130).lineTo(0, 130).close();

  var title = new Text(item.type, [25, 8], {
    stroke: { color: e.options.labels.color, width: 0.5 }
  });

  var line1 = new Text("$" + item.amount, [25, 40], {
    stroke: { color: e.options.labels.color, width: 0.5 }
  });

  var line2 = new Text("for", [45, 60], {
    stroke: { color: e.options.labels.color, width: 0.5 }
  });

  var line3 = new Text(item.employees, [42, 80], {
    stroke: { color: e.options.labels.color, width: 0.5 }
  });

  var line4 = new Text("Employees", [25, 100], {
    stroke: { color: e.options.labels.color, width: 0.5 }
  });

  const group = new Group();
  group.append(path1, path2, title, line1,  line2,  line3,  line4);
  return group;
  }

In this StackBlitz example, the Kendo UI Donut Chart has text in the center with a thinner series and custom legend.

Type 'Element' is missing the following properties from type 'Group': children in Kendo UI Charts Drawing at e.createVisual()

1 Answers1