100% stacked bar chart with rounded ends

[Sarthak]

How do I make both ends of a stacked bar chart round .attaching the current state of the developed chart and the expected design.kindly let me know how do I achieve this.

[Hetali]

Hi Sarthak,

In order to show round edges on both the sides of the 100% Stacked Bar Chart, use the visual property of the SeriesItemComponent as seen below:

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item type="bar" [visual]="radiusStart" [stack]="{ type: '100%' }" [data]="[1]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

public radiusStart = (e: SeriesVisualArgs) => {
  var height = e.rect.size.height;
  var width = e.rect.size.width;
  var radius = height / 2;
  var originY = e.rect.origin.y;
  var originX = e.rect.origin.x;
  var pointX = originX + radius;
  var pointY = originY + radius;

  const geometry = new GeomCircle([pointX, pointY], radius);
  const circle = new Circle(geometry, {
    stroke: { color: e.series.color, width: 1 },
    fill: { color: e.series.color }
  });

  // Clipping of circle to draw an arc is optional

  // const clipPath = new Path();
  // clipPath
    //   .moveTo(originX, originY)
    //   .lineTo(pointX, originY)
    //   .lineTo(pointX, originY + height)
    //   .lineTo(originX, originY + height)
    //   .close();

  // circle.clip(clipPath);

  const path = new Path({
    stroke: { color: e.series.color, width: 1 },
    fill: { color: e.series.color }
  });
  path
    .moveTo(pointX, originY)
    .lineTo(originX + width, originY)
    .lineTo(originX + width, originY + height)
    .lineTo(pointX, originY + height)
    .close();

  const group = new Group();
  group.append(circle, path);

  return group;
};

In this StackBlitz example, the 100% Stacked Kendo UI Bar Chart has round edges.

Please let me know if this helps or if you have any further questions regarding the Angular Bar Chart.

Regards,
Hetali
Progress Telerik

[Sarthak]

Hi Hetali.

Thanks a lot for the quick response.one further query on top of it.there arises a situation where I have only one series item.in that case how do I add both radius start and radius end to that single chart item .

[Hetali]

Hello Sarthak,

To add round edges on both the sides of a single series item, merge the functions as seen below:

public radius = (e: SeriesVisualArgs) => {
  var height = e.rect.size.height;
  var width = e.rect.size.width;
  var radius = height / 2;
  var originY = e.rect.origin.y;
  var originX = e.rect.origin.x;
  var pointX = originX + radius;
  var pointY = originY + radius;

  const geometry = new GeomCircle([pointX, pointY], radius);
  const circle = new Circle(geometry, {
    stroke: { color: e.series.color, width: 1 },
    fill: { color: e.series.color }
  });

  const geometry1 = new GeomCircle([originX + width - radius, pointY], radius);
  const circle1 = new Circle(geometry1, {
    stroke: { color: e.series.color },
    fill: { color: e.series.color }
  });

  const path = new Path({
    stroke: { color: e.series.color, width: 1 },
    fill: { color: e.series.color }
  });
  path
    .moveTo(pointX, originY)
    .lineTo(originX + width - radius, originY)
    .lineTo(originX + width - radius, originY + height)
    .lineTo(pointX, originY + height)
    .close();

  const group = new Group();
  group.append(circle, path, circle1);

  return group;
};

In this updated StackBlitz example, a single series Bar Chart has round edges.

I hope this helps. Let me know in case you need any further assistance.

Regards,
Hetali
Progress Telerik

[Sarthak]

Can i pass additional parameters to this methods ?

[Hetali]

Hello Sarthak,

The visual property of the SeriesItemComponent in the Kendo UI Chart passes the built-in arguments, SeriesVisualArgs, to the function and no additional parameters can be passed to the function.

Let me know if this information helps or if you have any further questions.

Regards,
Hetali
Progress Telerik