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 egdes.

Please let me know if this helps or if you have any further questions.

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